2

我有一个.listof .items，像这个：

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

两者.item都有.list一个最大高度，比如 100 像素和 280 像素。我想.item在它溢出时隐藏最后一个，可能没有JS。

我的意思是，如果.listhas overflow: hidden，并且所有.items 都达到最大高度，那么最后一个被部分切割。我想完全隐藏它，即它适合，或者它消失。

我可以同时更改 CSS 和 HTML（包括，例如，使用<ul><li>...而不是divs）

4

2 回答 2

2

如果您的项目有一个固定的高度，而不是最大值，您可以使用 nth-child 来预测它将在哪个项目开始溢出。

样品| 代码

.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 解决方案。

样品| 代码

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;
}
于 2012-04-11T11:23:08.830 回答
0

您需要 javascript 来计算项目的高度，或者如果您只想使用 css 来计算并且您知道两个元素的高度不会改变，您可以使用 nth-child css 选择器nth-child计算适合和隐藏其他元素的高度

于 2012-04-11T11:05:02.090 回答