通過CSS

Question

隱藏在溢出的情況下，最後一個項目我有.item的.list一個S，像這樣的：

<div class="list"> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
</div> 

兩個.item和.list有最大高度，說100像素和280像素。 我想隱藏最後.item溢出時，可能沒有JS。

我的意思是，如果.list有overflow: hidden，並且所有.item都達到最大高度，那麼最後一個被部分切割。我想把它完全隱藏起來，也就是說它適合，否則它就會消失。

我可以更改這兩個CSS和HTML（包括，例如，使用在<ul><li>...代替div S）

Answer 1

需要Javascript來計算項目的高度，或者如果你想這樣做只是CSS和你知道這兩個元素的高度不會改變，你可以計算出有多少人可以使用nth-child css選擇器來隱藏和隱藏其他人。nth-child

Answer 2

如果你的物品有固定的高度，而不是最大值，我們用n個孩子來預測它會從哪個項目開始溢出。

Sample |代碼

.item{ 
    height: 75px; 
    border: 1px solid blue; 
    overflow: auto; 
} 

.item:nth-child(1n+4){ /* 4th element and up */ 
    display: none; 
} 

.list{ 
    max-height: 280px; 
    border: 1px solid red; 
    overflow: hidden; 
} 

但是，由於它們不是固定的高度，所以這種動態的唯一解決方案就是使用javascript。

---

在這個筆記上，這裏是一個javascript解決方案。

Sample |代碼

的Javascript

var eList = document.getElementById("list"), 
    eItems = eList.getElementsByTagName("div"), 
    iMaxHeight = parseInt(getStyle(eList, "max-height")), 
    iSumHeight = 0; 

for(i = 0; i < eItems.length; i++){ 
    var iHeight = parseInt(getStyle(eItems[i], "height")); 
    //Check if next item will overflow, in which case, we're going to hide it 
    if((iSumHeight + iHeight) >= iMaxHeight){ 
     eItems[i].style.display = "none"; 
    }else{ 
     iSumHeight += iHeight; 
    } 
} 

function getStyle(el,styleProp){ 
    if (el.currentStyle) 
     var y = el.currentStyle[styleProp]; 
    else if (window.getComputedStyle) 
     var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp); 
    return y; 
} 

HTML

<div id="list"> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac.</div> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac.</div> 
</div> 

CSS

.item{ 
    max-height: 110px; 
    border: 1px solid blue; 
    overflow: auto; 
} 

#list{ 
    max-height: 290px; 
    border: 1px solid red; 
    overflow: hidden; 
}