Question

www.un.org/Depts/DGACM/index_french.htm

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

Both .item and .list have a maximal height, say 100px and 280px. I d like to hide the last .item when it overflows, possibly with no JS.

我指的是,如果<代码>.list has over:idden , and all .items up to the max,那么最后一项是部分削减的。我愿完全掩盖它,即它是否适合,或者它消失。

I can change both the CSS and the HTML (including, e.g., using <ul><li>... instead of divs)

Answer 1

如果贵方的物品有固定的高度,而不是上限,那么你就能够把 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;
}

然而,由于它们是固定的高度,这种动态的唯一解决办法是使用 j。

就此而言,这里的解决办法是一纸空文。

Sample 。

Java

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;
}

传真

<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;
}

Answer 2

你们需要用javascript来计算物品的高度,或者如果你想要用 c子做,你知道这两个元素的高度不会改变,那么,你可以计算出有多少将适合使用这些物品,并隐藏其他使用生子的 c子的 select子的 select子。

友情链接