http://jsfiddle.net/S8g4E/我有一個div帶兩個孩子的容器。第一個孩子有給定的身高。如何讓第二個孩子占據容器的“自由空間” div而不給其指定高度？在示例中，粉紅色div也應占據白色空間。與此問題類似：如何使div占據剩余高度？但是我不想擺絕對的位置。
3 回答
飲歌長嘯
TA貢獻1951條經驗 獲得超3個贊
可以通過各種方式擴展#down子級以填充剩余的空間，#container具體取決于您希望獲得的瀏覽器支持以及是否#up具有定義的高度。
.container {
width: 100px;
height: 300px;
border: 1px solid red;
float: left;
}
.up {
background: green;
}
.down {
background: pink;
}
.grid.container {
display: grid;
grid-template-rows: 100px;
}
.flexbox.container {
display: flex;
flex-direction: column;
}
.flexbox.container .down {
flex-grow: 1;
}
.calc .up {
height: 100px;
}
.calc .down {
height: calc(100% - 100px);
}
.overflow.container {
overflow: hidden;
}
.overflow .down {
height: 100%;
}
<div class="grid container">
<div class="up">grid
<br />grid
<br />grid
<br />
</div>
<div class="down">grid
<br />grid
<br />grid
<br />
</div>
</div>
<div class="flexbox container">
<div class="up">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
<div class="down">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
</div>
<div class="calc container">
<div class="up">calc
<br />calc
<br />calc
<br />
</div>
<div class="down">calc
<br />calc
<br />calc
<br />
</div>
</div>
<div class="overflow container">
<div class="up">overflow
<br />overflow
<br />overflow
<br />
</div>
<div class="down">overflow
<br />overflow
<br />overflow
<br />
</div>
</div>
格網
CSS的grid布局提供了另一種選擇，盡管它可能不如Flexbox模型那么簡單。但是，只需要設置容器元素的樣式即可：
.container { display: grid; grid-template-rows: 100px }
所述grid-template-rows定義的第一行作為固定100px的高度，并且保持行會自動拉伸以填充剩余的空間。
我很確定IE11需要-ms-前綴，因此請確保在希望支持的瀏覽器中驗證功能。
彈性盒
現在，CSS3的靈活框布局模塊（flexbox）得到了良好的支持，并且可以非常容易地實現。由于它具有靈活性，因此即使在#up沒有定義的高度時也可以使用。
#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }
重要的是要注意，IE10和IE11對某些flexbox屬性的支持可能會出現問題，而IE9或更低版本完全不支持。
計算高度
另一個簡單的解決方案是使用CSS3calc功能單元，正如Alvaro在他的答案中指出的那樣，但是它要求第一個孩子的身高是一個已知值：
#up { height: 100px; }
#down { height: calc( 100% - 100px ); }
它得到了廣泛的支持，唯一值得注意的例外是<= IE8或Safari 5（不支持）和IE9（部分支持）。其他一些問題包括將calc與transform或box-shadow結合使用，因此如果您擔心此問題，請確保在多個瀏覽器中進行測試。
其他選擇
如果需要較早的支持，則可以添加height:100%;，#down使粉紅色div完全高出一個警告。因為#up將其向下推，將導致容器溢出。
因此，您可以添加overflow: hidden;到容器中以解決此問題。
或者，如果的高度#up是固定的，則可以將其絕對放置在容器中，并在上添加padding-top #down。
并且，另一個選擇是使用表格顯示：
#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}
- 3 回答
- 0 關注
- 1864 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消