最近在群里，有個小伙伴問了這么一道很有趣的問題：
CSS 能否實現，容器再某個高度下是某種表現，一旦超出某個高度，則額外展示另外一些內容
為了簡化實際效果，我們看這么一張示意效果圖：
可以看到，當容器高度沒有超過某一個值時，沒有箭頭圖標。反之，箭頭圖標出現。
這個效果在很多場景都會出現，可以算是一個高頻場景，那么在今天，我們能否不使用 Javascript，僅僅憑借 CSS 實現類似于這樣的功能呢？
答案當然是可以，XBoxYan 大佬在 CSS 實現超過固定高度后出現展開折疊按鈕 介紹了一種非常巧妙的借助浮動的解法，十分有意思，感興趣的同學可以先行一步了解。
當然，浮動 float 在現如今的 CSS 世界，運用的已經非常少了。那么除了浮動，還有沒有其它有意思的解法？本文我們將一起來探究探究。
方法一：借助最新的容器查詢
第一種方法，非常簡單，但是對兼容性有所要求。那就是使用容器查詢 -- @container 語法。
容器查詢在 新時代布局新特性 -- 容器查詢 也詳細介紹過。
簡單而言，容器查詢它給予了 CSS，在不改變瀏覽器視口寬度的前提下，只是根據容器的寬度或者高度變化，對布局做調整的能力。
基于這個場景，我們假設我們有如下的 HTML/CSS 結構：
<div class="g-container">
<div class="g-content">
Lorem ipsum dolor s... </div></div>
.g-container { position: relative; width: 300px; height: 300px; resize: vertical; overflow: hidden; .g-content { height: 100%;
} .g-content::before { content: "↑"; position: absolute; bottom: 0px; left: 50%; transform: translate(-50%, 0);
}
}它是這么一個樣式效果：
其中，我們給元素 .g-content 添加了 resize: vertical，讓它變成了一個可以在豎直方向上通過拖動改變高度的容器，以模擬容器在不同內容的場景下，高度不一致的問題：
我們通過元素的偽元素實現了箭頭 ICON，并且它是一直顯示在容器內的。
下面，我們通過簡單的幾句容器查詢代碼，就可以實現讓箭頭 ICON，只在容器高度超過特定高度的時候才出現：
.g-container {
container-type: size;
container-name: container;
}@container container (height <= 260px) { .g-content::before { opacity: 0;
}
}簡單解釋一下：
.g-container 它被用作容器查詢的目標容器
@container container (height <= 260px) {} 表示這是一個容器查詢規則，在括號中的條件 (height <= 260px) 表示當容器的高度小于等于 260px 時，應用該規則下的樣式
具體規則為，如果容器的高度小于等于 260px 時，.g-content 元素的偽元素將變得透明
這樣，我們就非常簡單的實現了容器在不同高度下，ICON 元素的顯示隱藏切換：
完整的代碼，你可以戳這里：CodePen Demo -- flexible content
當然，這個方案的唯一缺點在于，截止至今天（2023-11-11），兼容性不是那么好：
那，有沒有兼容性更好的方案？當然，來我們一起來看看 clamp + calc 的方案。
方法二：clamp + calc 大顯神威
上面效果的核心在于：
如果容器的高度大于某個值，顯示樣式 A
如果容器的高度小于等于某個值，顯示樣式 B
那么想想看，如果拿容器的高度減去一個固定的高度值，會發生什么？假設一下，ICON 元素的 CSS 代碼如下：
.g-content::before { content: "↑"; position: absolute; left: 50%; transform: translate(-50%, 0); bottom: calc(100% - 200px);
}仔細觀察 bottom: calc(100% - 200px)，在元素的 bottom 屬性中，100% 表示的是容器當前的高度，因此 calc(100% - 200px) 的含義就代表，容器當前高度減去一個固定高度 200px。因此：
當容器高度大于 200px，calc(100% - 200px) 表示的是一個正值
當容器高度小于 200px，calc(100% - 200px) 表示的是一個負值
當容器高度等于 200px，calc(100% - 200px) 表示 0
我們看看這種情況下，整個 ICON 的表現是如何的：
可以看到，當容器高度大于 200px 的時候，箭頭 ICON 確實出現了，但是，它無法一直定位在整個容器的最下方。
有什么辦法讓它在出現后，一直定位在容器的最下方嗎？
別忘了，CSS 中，還有幾個非常有意思的數學函數：min()、max()、clamp()，它們可以有效限定動態值在某個范圍之內！
不太了解的，可以看看這篇 現代 CSS 解決方案：CSS 數學函數
利用 clamp()，我們可以限定計算值的最大最小范圍，在這個場景下，我們可以限制 bottom 的最大值為 10px：
.g-content::before {
// ... bottom: clamp(-99999px, calc(100% - 200px), 10px);
}上面的代碼 clamp(-99999px, calc(100% - 200px), 10px)，核心在于，如果 calc(100% - 200px) 的計算值大于 10px，它只會取值為 10px，利用這個技巧，我們可以在容器高度超長時，把箭頭 ICON 牢牢釘在容器的下方，無論容器的高度是多少：
到此，結束了嗎？顯然沒有。
雖然上面的代碼，解決當 calc(100% - 200px) 的計算值大于 10px 的場景，但是沒有解決，當 calc(100% - 200px) 的計算值處于 -10px ~ 10px 這個范圍內的問題。
我們可以清楚的看到，當我們往下拖動容器變高的時候，箭頭元素是逐漸慢慢向上出現，而不是突然在某一個高度下，直接出現，所以在實際使用中，會出現這種 ICON 只出現了一半的尷尬場景：
但是，莫慌！這個問題也好解決，我們只需要給 calc(100% - 200px) 的計算值，乘上一個超級大的倍數即可。原因在于：
當 calc(100% - 200px) 的計算值是負數時，我們其實不希望 ICON 出現，此時，乘上一個超級大的倍數，依然是負數，不影響效果
當 calc(100% - 200px) 的計算值是正數時，為了避免 ICON 處在只漏出部分的尷尬場景，通過乘上一個超級大的倍數，讓整個計算值變得非常大，但是由于又有 clamp() 最大值的限制，無論計算值多大，都只會取 10px
看看代碼，此時，整個 bottom 的取值就改造成了：
.g-content::before {
// ... bottom: clamp(-9999px, calc(calc(100% - 200px) * 100000), 10px);
}通過，將 calc(100% - 200px) 的值，乘上一個超大的倍數 100000，無論是正值還是負值，我們把計算值放大了 100000 倍。這樣，整個效果就達成了我們想要的效果：
仔細看上圖，ICON 元素從漸現，變成了瞬間出現！與上面的 @container 效果幾乎一致，最終達成了我們想要的效果。
其核心就在于 clamp(-9999px, calc(calc(100% - 200px) * 100000), 10px)，一定需要好好理解這一段代碼背后的邏輯。
基于此，我們就巧妙的利用 clamp() + calc() 方法，近似的實現了類似于 if/else 的邏輯，實在是妙不可言！
CodePen Demo -- flexible content
作者：ChokCoco
原文：https://www.cnblogs.com/coco1s/p/17831064.html
該文章在 2023/11/27 15:31:27 編輯過
400 186 1886
