如何使div占用剩余的垂直空間

Question

我的布局如下-

<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>

包含Content的第二個div停留在Title div的底部。 現在，我希望能夠使Content div占用其余的75px高度。 問題是頂部div的高度不固定。 這是問題的演示-

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

Answer 1

嘗試這個

<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>

Answer 2

您可以通過將背景色移到容器上並重新排列一下，使其看起來好像占據了整個區域。

<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>

Answer 3

除去包裝紙div的高度。 這樣，高度將是動態的。

Answer 4

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

最好的選擇是：

• 將包裝器設置為display：table，並將標題和內容div設置為display：table-row

---

但是，如果您想發揮更多創意，可以改用以下任何一種其他方法：

• 從您的外部容器中刪除100像素的高度，使其僅與內容物一樣高。

• 如果要指定外部容器的高度，則也可以指定內部元素的高度（例如：Title 25px，內容75px；或Title：25％，內容75％。

• 如果您的外部容器應該代表頁面的整個高度，則可以將內容高度設置為100vh，即視口高度的100％。

• 如果您想對此非常明確，可以使用javascript設置Content div的高度：

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