我的容器中有2张桌子。其中一个将粘在容器的底部,另一个将填充父容器的剩余高度
样式:
.page
{
width: 21cm;
min-height: 29.7cm;
padding: 0.5cm;
margin: 1cm auto;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position: relative;
}
<div class="page">
<table class="table1" style="height: 100%;">
<tr>Supposed to fill remaining space</tr>
</table>
<div style="position: absolute; bottom: 0;">
<table class="table2">
<tr>Floats to the bottom</tr>
</table>
</div>
</div>
我想要的是让table1占用剩余的剩余空间,但它根本不会填满所有空间。
最佳答案
您可以删除HTML表并使用显示。
DEMO
<div class="page">
<div class="tr fullH">
<div class="td ">
<section>
<p> fill avalaible space left</p>
</section>
</div>
</div>
<div class="tr">
<div class="td">
<section>
<p>Floats to the bottom and expand if needed</p>
</section>
</div>
</div>
</div>
和CSS
.page
{
width: 21cm;
height: 29.7cm;
padding: 0.5cm;
margin: 1cm auto;
background: lightblue;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
/*position: relative; unneeded*/
display:table;/* height turns to be min-height , table expands */
table-layout:fixed;/* keeps width as set, height stills expands if needed */
}
.tr {
display:table-row;
}
.td {
display:table-cell;
}
.fullH {
height:100%;
}
使用
display:flex;
属性使其非常简单:DEMO 2
的HTML
<div class="page">
<section class="fullH">
<p>Supposed to fill remaining space</p>
</section>
<section>
<p>Floats to the bottom and expand if needed</p>
</section>
</div>
和CSS
.page
{
width: 21cm;
height:29.7cm;
padding: 0.5cm;
margin: 1cm auto;
display:flex;
flex-direction:column
}
.fullH {
flex:1;
}