Question

很抱歉不得不问这个，因为这里有很多CSS 100％身高的问题（我已经读过）。

我要使用DIV而不是TABLE来实现简单的布局。前3行是固定高度，第4行应该扩展，第5行应该是固定大小（在底部）。

这是一个有桌子的海峡前锋，我怎么能用DIV做到这一点？

这是TABLE版本：

<html>
<head>

</head>
<body>

<table width="100%" height="100%" border="1">
    <tr height="20px">
         <td>
             fixed height 20
         </td>
    </tr>
    <tr height="50px">
         <td>
             fixed height 50
         </td>
    </tr>
    <tr height="100px">
         <td>
             fixed height 100
         </td>
    </tr>
    <tr>
        <td>
            auto expanding height
        </td>
    </tr>
    <tr height="50px">
        <td>
            fixed height 50
        </td>
    </tr>
</table>
</body>
</html>

到目前为止，这是我迄今为止最好的尝试。

<html>
<head>
</head>
<body>

<div style="width: 100%; height: 100%; border-width: 2px; border-style: solid;">

    <div style="height: 20px; border-width: 2px; border-style: solid">
        fixed height 20
    </div>

    <div style="height: 50px; border-width: 2px; border-style: solid">
        fixed height 50
    </div>

    <div style="height: 100px; border-width: 2px; border-style: solid">
        fixed height 100
    </div>

    <div style="border-width: 2px; border-style: solid;">
        Auto expanding?
    </div>

    <div style="height: 50px; border-width: 2px; border-style: solid">
        fixed height 50
    </div>
</div>
</body>
</html>

Answer 1

Divs会自动堆叠，所以你所要做的就是把它们移到一个高度，你应该全部设置好。试试这个：

<强> HTML

<div class="container">
    <div class="twenty">
        fixed height 20
    </div>
    <div class="fifty">
        fixed height 50
    </div>
    <div class="hundred">
        fixed height 100
    </div>
    <div class="auto">
        <div class="content">
            ....
        </div>
    </div>
    <div class="fifty" style="border-bottom:none; border-top:1px solid">
        fixed height 50
    </div>
</div>

<强> CSS

html,body {
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}

.container {
    width:100%;
    height:100%;
}

.twenty, .fifty, .hundred, .auto {
    border-bottom:1px solid black;
}

.twenty {
    height:20px;
}

.fifty {
    height:50px;
}

.hundred {
    height:100px;
}

.auto {
    height:100%;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    margin:-120px 0;
    padding:120px 0;
}

.content {
    float:left;
    overflow:auto;
    height:100%;
}

.content{
    width:100%;
}

编辑更新了答案以供将来参考。现在容器完全填充文档的宽度和高度，只需滚动页面的可滚动部分，同时保留OP想要的部分。

完整视图：http://jsfiddle.net/8abeU/show/ 小提琴：http://jsfiddle.net/8abeU

Answer 2

您需要将父级的position属性设置为absolute，并将auto div的高度设置为100％。 You can see it here.还要记住在HTML的顶部添加doctype声明，这有助于使其在浏览器中更加一致地呈现。

注意：

这不会导致容器垂直填充整个窗口，但如果你不必在其上放置边框，它就会像它一样。

Answer 3

快速回答是用DIV替换你的table和tr元素。然后用css class =“fixed-height-（无论大小）设置前三行”让第四行根据需要展开，最后一行有一个css class =“fixed-height-（无论大小）。你可以使用假设所有其他样式都相同，那么高度相同的同一个类。

使用100％高度的CSS实现简单的行布局

3 个答案: