在进行布局的时候会遇见这种需求,第一行固定,第二行充满屏幕,而且第二行超出在第二行出现滚动条,并且第二行中有多列,几列之前可以宽度灵活调整,隐藏一列,其他列的宽度要随之变化,在不用js计算的情况下,纯css实现的方式是:
<div style="width:100%;height:100%;position:relative;">
<div style="height:50px!important;width:100%;overflow:hidden;position:absolute;top:0;left:0;background-color:pink;"> </div>
<div style="position:absolute;top:50px;bottom:0;left:0;right:0;">
<table style="width:100%;height:100%; table-layout:auto!important;" cellpadding="0" cellspacing="0" border="0">
<tr style="width:100%;height:100%;">
<td style="width:200px;height:100%;">
<div style="width:200px;height:100%;background:pink;">123</div>
</td>
<td style="height:100%;">
<div style="width:100%;height:100%;overflow:auto;">
<h1 style="width:300px;height:200px;background-color:hotpink;margin:10px;"></h1>
<h1 style="width:300px;height:200px;background-color:hotpink;margin:10px;"></h1>
<h1 style="width:300px;height:200px;background-color:hotpink;margin:10px;"></h1>
<h1 style="width:300px;height:200px;background-color:hotpink;margin:10px;"></h1>
<h1 style="width:300px;height:200px;background-color:hotpink;margin:10px;"></h1>
<h1 style="width:300px;height:200px;background-color:hotpink;margin:10px;"></h1>
<h1 style="width:300px;height:200px;background-color:hotpink;margin:10px;"></h1>
</div>
</td>
</tr>
</table>
</div>
</div>