CSS：底部塊調整大小迫使頂部塊縮小（在固定大小的容器內）

我爲以下問題搜索CSS解決方案。在一個容器內部，我們有兩個塊，它們垂直對齊，它們填充容器的整個區域，不重疊，隨着底部放大，頂部縮小（不會伸出容器大小）。CSS：底部塊調整大小迫使頂部塊縮小（在固定大小的容器內）

考慮我們從下面的代碼創建的佈局開始（在瀏覽器中查看它）。以下兩個條件必須滿足：

當大小.box的改變，.top和.bottom一起填充它的整個區域，但高度.bottom的保持固定。
當高度的.bottom被改變時，.top的高度被改變; .box不受影響。

所以，我想只有.box的寬度/高度和.bottoms的高度的整體控制該箱模型（例如由JavaScript修改），其餘全部被調整CSS自動。

的代碼（這是遠離的解決方案，我知道它可以與一些JavaScript來完成，但讓我們找到一個純CSS解決方案）：

<html> 
    <head> 
    <style> 
     .box { 
      position:fixed; 
      top:20px; 
      left:20px; 
      width:200px; /* these adjust the whole box size,*/ 
      height:320px; /* children cannot stretch out of these limits*/ 
      background:silver; 
     } 
     .top { 
      clear:left; 
      height:280px; /* we want it to be like '100%-bottom's height'!*/ 
      margin: 3px; 
      background: white; 
     border: red 1px solid; 
     } 
     .bottom { 
      position:absolute; 
      bottom:0; 
      //top:0; 
      left:0; 
      right:0; 
      margin: 3px; 
      height: 27px; /* this adjusts how top & bottom are sized inside the box*/ 
      background: white; 
     border: blue 1px solid; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="box"> 
     <div class="top">Top</div> 
     <div class="bottom">Bottom</div> 
    </div> 
    </body> 
</html>

來源

2010-01-21 pavek

我看不出有任何理由爲什麼你想要做到這一點，並且無法控制自己身高的高度。

這個代碼的高度取決於divs中的文本。

<html> 
    <head> 
    <style> 
     .box { 
     border:1px solid #583454; 
      position:fixed; 
      top:20px; 
      left:20px; 
      width:200px; // these adjust the whole box size, 
      height:320px; // children cannot stretch out of these limits 
      background:silver; 
     } 
     .top { 
      clear:left; 
      height:280px; // we want it to be like '100%-bottom's height'! 
      margin: 3px; 
      background: white; 
     border: red 1px solid; 
     } 
     .bottom { 

      bottom:0; 
      //top:0; 
      left:0; 
      right:0; 
      margin: 3px; 
      height: 27px; // this adjusts how top & bottom are sized inside the box 
      background: white; 
     border: blue 1px solid; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="box"> 
     <div class="top">Top</div> 
     <div class="bottom">Bottom</div> 
    </div> 
    </body> 
</html>

來源

2010-01-21 23:55:05

我想你只需要改變：

.top { 
      height:280px; 
     }

到：

.top { 
      height:100%; 
     }

然後，如果你調整「盒子」的高度，「頂」調整高度以填充額外的空間而「底部」的高度保持不變。而當您更改「底部」的高度時，「頂部」的高度會調整以填充空間，但「框」的高度保持不變。

這是否解決您的問題？

來源

2010-09-23 19:37:53 TheLibzter

CSS：底部塊調整大小迫使頂部塊縮小（在固定大小的容器內）

回答

相關問題