是否有一種CSS只能完全隱藏部分溢出的元素？

Question

假設你有一個具有的高度是瀏覽器窗口高度的百分比的元素。這個元素包含一堆塊元素。

是否有使用類似overflow: hidden但要確保最後一個塊元素完全隱藏，而不是部分隱藏，如果它溢出的方法嗎？

（這是很容易用JavaScript做的，但我更喜歡用樣式表來解決這個問題。）

Answer 1

這是2013年不可能的，但現在所有IE < = 10都死了，我們可以使用flexbox。

的基本思想是包裝柔性物品出可見區域。

刪除overflow: hidden;，看看那裏的項目去了。

$('.parent').ready(function() { 
 
    $('.parent').resizable(); 
 
})

* { 
 
    box-sizing: border-box; 
 
} 
 
.parent { 
 
    height:288px; 
 
    width: 233px; 
 
    border: 5px dashed blue; 
 
    background: yellow; 
 
    
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    overflow: hidden; 
 
} 
 

 
.child { 
 
    height: 100px; 
 
    width: 100%; 
 
    border: 5px solid brown; 
 
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="parent"> 
 
<div class="child">0</div> 
 
<div class="child">1</div> 
 
<div class="child">2</div> 
 
<div class="child">3</div> 
 
<div class="child">4</div> 
 
<div class="child">5</div> 
 
<div class="child">6</div> 
 
<div class="child">7</div> 
 
<div class="child">8</div> 
 
<div class="child">9</div> 
 
</div>

Answer 2

好了，基本上沒有辦法在其中您可以用純CSS做到這一點，除非你恰好只爲早期的Internet Explorer版本開發（使用表達式（））。

基本上，它是不再可能的樣式表（這是真的你只是在做這一切的樣式表的選項）中運行的JavaScript。

這並不難jQuery中做雖然： http://jsfiddle.net/bernie1227/wCx9N/

該解決方案基本上是利用：

pageWidth - (elementWidth + elementLeft) < 0 

爲了檢查元素滿溢。