Question

我有一个div，可以在屏幕的整个高度上进行操作。我想在其中放置三个div：标题，内容和页脚，标题贴在顶部和底部到底部，内容适合它们之间。我发现这样做的解决方案要求我为页脚和/或标题定义一个高度，然后给中心div一个等于那个高度的边距，我想要保留未定义的（它们应该伸展以适合他们的内容）。有没有办法在不使用javascript的情况下执行此操作？

当浏览器调整大小时，页脚和页眉应保持不变，中心应缩小。

<html>
<head>
<style>
.stretchedToMargin {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    background-color: green;
}
</style>
</head>
<body>

<div class="stretchedToMargin">

    <div>
        Header (style="top:0") Indefinite height. 
        expands to fit content without scrolling.
    </div>

    <div>
        Content
        Fits between header and footer, using the pixels leftover 
        scrolling if needed
    </div>

    <div>Footer (style="bottom:0") Indefinite height.
        expands to fit content without scrolling.
    </div>

</div>

</body>
</html>

使用表格（因为只有CSS才能显示这种情况）如下所示也不起作用。长文本溢出整个布局，没有滚动条出现......

<div class="stretchedToMargin">

    <table style="height:100%;">
        <tr>
            <td style="height:1px;">Header</td>
        </tr>
        <tr>
            <td><div style="height:100%; overflow:auto;">...Long text...</div></td>
        </tr>
        <tr>
            <td style="height:100px">Footer</td>
        </tr>
    </table>

</div>

Answer 1

最简单的方法是在包装器上使用display:table，在部分div上使用display:table-row但是像往常一样，跛脚鸭IE 7不支持它，所以只需使用实际的<table> 。是的，它不是语义，但这确实是一个小小的权衡。

堆叠的div与相对于兄弟div的偏移量

1 个答案: