如何讓一個div取剩餘的垂直空間

我有一個佈局如下 -如何讓一個div取剩餘的垂直空間

<div style="height:100px;border: 1px solid #F44;"> 
    <div style="background-color: #ccc; padding: 4px;">Title</div> 
    <div style="background-color: #a0a; padding: 4px;">Content</div> 
</div>

其中包含的內容，堅持標題div的倒數第二個div。現在我希望能夠讓Content div佔據剩餘的75px高度。問題是頂部div的高度不固定。這是問題的一個演示 -

http://jsbin.com/pirus/2/edit

來源

2014-07-23 Tushar

試試這個

<div style="height:100px;border: 1px solid #F44; overflow: hidden"> 
    <div style="background-color: #ccc; padding: 4px;">Title</div> 
    <div style="background-color: #a0a; padding: 4px; height: 100%;">Content</div> 
</div>

來源

2014-07-23 19:32:46 Idziak

從技術上講，這是切斷內容分區的底部... – Jason

是的，它切斷了底部。 – Tushar

你可以使它看起來像它通過移動背景顏色的容器，並重新安排這一個佔據了整個區域位。

<div style="height:100px;border: 1px solid #F44;background-color: #a0a;"> 
    <div style="background-color: #ccc; border:4px solid #ccc;">Title</div> 
    <p style='margin:0;padding:3px'>Content</p> 
</div>

來源

2014-07-23 19:34:19

不，這不行。我知道它看起來像是在工作，但它沒有像上面發佈的問題那樣完全按預期進行。 – Tushar

從包裝div移除高度。這樣，高度將是動態的。

來源

2014-07-23 20:33:19 Aleksandar

你可以做很多不同的事情。

你最好的選擇是：

設置包裝上，以顯示：表，並設置標題和內容div的展示：表列

但是，如果你想要獲得更多創意，您可以使用其他選項中的任意一種：

從外容器中移除100像素高度，使其僅與內容一樣高。
如果要指定外容器的高度，你可以指定你的內部元素的高度，以及（例如：標題25px的，內容960x75像素;或標題：25％，含量75％
如果外部容器應該代表你可以設置你的內容高度100vh這是視高度的100％的頁面的整個高度。

如果你想了解它，你可以設定非常明確Content div的高度與javascript：

var contentH = ($('.wrapper').height() - $('.title').height());   
$('.content').css('height',contentH);

來源

2014-07-23 20:46:42 davidcondrey

如何讓一個div取剩餘的垂直空間

回答

相關問題