限制顯示：高度動態時的表格行/單元元素高度

當內容溢出時，我需要製作一個可滾動的div。值得注意的是，由於佈局原因，div是display: table/table-row系統的一部分。限制顯示：高度動態時的表格行/單元元素高度

底側欄容器需要允許滾動時的含量超過高度。我遇到的問題是 - 使用這種類型的佈局 - CSS無法將較低的div鎖定到其父級的動態確定高度（.holder）。它要麼需要百分之百的高度，要麼百分之百是其父母的高度，這太大了。

我的目標是用純CSS解決這個問題，這樣我們可以避免在改變邊欄元素的高度時運行javascript。

.wrapper-page { position: absolute; top: 38px; bottom: 10px; left: 10px; right: 10px; overflow: hidden; } 
.sidebar { width: 25%; height: 100%; } 

.holder { width: 100%; height: 100%; display: table; table-layout: fixed } 
.holder > div:first-child { height: 25%; max-height: 25%; } 
.holder > div { display: table-row; table-layout: fixed }

正因爲如此佈局，只有sidebar將正常如果我們使用overflow-y: scroll滾動 - 但滾動整個側邊欄。 .holder > div:last-child是應該滾動的。

<div class="wrapper-page"> 
    <div class="sidebar"> 
     <div class="holder"> 
      <div> 
       box one<br> 
      </div> 
      <div> 
       box two<br> 
      </div> 
     </div> 
    </div> 
</div>

來源

2014-01-15 helion3

你能夠使用'box-sizing：border-box'嗎？如果是這樣，請通過百分比設置高度，然後將溢出設置爲您喜歡的任何配置。 – RedYetiCo

我不能使用box-sizing，因爲我們別無選擇，只能支持IE7，而且polyfill的性能消耗太大。 – helion3

所以，你在說'.holder> div：last-child {overflow-y：scroll; ''不工作？這是IE7要求還是其他的限制？ – RedYetiCo

我有這方面的工作在本地使用：

div { 
    outline: 1px solid blue; 
} 
.wrapper-page { 
    position: absolute; 
    top: 38px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
    overflow: hidden; 
} 
.sidebar { 
    width: 25%; 
    height: 100% 
} 
.holder { 
    width: 100%; 
    overflow: hidden; 
} 
.holder > div { 
    overflow-y: scroll; 
} 
.holder > div:first-child { 
    height: 25%; 
} 
.holder > div:last-child { 
    height: 75%; 
}

我試圖粘貼回CodePen但它並不在他們的虛擬環境中工作。但它在一個平面的HTML文件中工作。不幸的是，我無法知道這是否適用於您，除非將其作爲可能的答案供您審閱。

說明：這裏的警告實際上是表結構本身。你將不得不使用剩餘的身高。這似乎是一種折衷; no-JS需要顯式CSS，與JS一樣，CSS可以更靈活。

此外，您可以使用另一個類的包裝頁面上，這樣就可以隱藏在上面板並展開下一個像這樣：

.wrapper-page.hide-upper .holder > div:first-child { display: none !important; } 
.wrapper-page.hide-upper .holder > div:last-child { height: 100% !important; }

它可能不是100％，你在找什麼，但是根據你對你想要實現的內容的描述，聽起來它會做同樣的事情。

來源

2014-01-16 00:20:53 RedYetiCo

謝謝，這個原理的工作原理是高度：75％，這是無法使用的，因爲在實際應用中，頂部窗格可以被用戶摺疊，這會增加下部窗格的高度。離開高度是允許表格佈局自動調整大小，沒有js。謝謝你的嘗試。目前，我只是使用JavaScript來計算正確的高度。噢，還有 – helion3

是的，但有趣的問題。也許如果你讓他們關閉上面板，向容器中添加一個類，這樣它就隱藏了頂部面板並擴展了底部面板？ – RedYetiCo

限制顯示：高度動態時的表格行/單元元素高度

回答

相關問題