Question

我有一个（相对）简单的布局，带有固定的页眉和页脚div。内容div分为两个“全高”div和display: inline-block;。左侧div用于导航，右侧用于实际内容，并且overflow-y: scroll;。问题是我无法设置右侧div的宽度来填充剩余空间。我已经尝试使用 float （作为最后的手段），但正确的div被向下推，老实说，我不想使用浮动。

在我的场景中填充剩余宽度吗？我非常想不硬编码正确div的宽度。

这是JSFiddle example。

简单的HTML结构：

<html>
<head></head>
<body
<div id="container">
    <div id="header">This is the header area.</div>
    <div id="content">
        <div id="leftContent">&nbsp;</div>
        <div id="textContent">
            <p>Hello world (and other content)</p>
        </div>
    </div>
    <div id="footer">This is the footer area.</div>
</div>
</body>
</html>

CSS摘录：

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

#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
             height:auto !important; height:100%; min-height:100%; }

#header { border-bottom:1px solid black; height:30px; }

#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }

#leftContent { display:inline-block; height:100%; width:200px;
              border-right:1px solid black; vertical-align:top; }

#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
              width:540px; /*would like to not have it hardcoded*/ }

#footer { position:absolute; width:100%; bottom:0; height:30px; }

修改：

感谢Prasanth's answer，我能够实现我想要的目标。解决方案是设置

display:flex; flex-direction:row;在#content div和

width: 100%;

#textContent。

~~在IE 11上进行测试（在兼容模式下向下测试）不会产生不需要的结果。~~ *可以找到新版本here。

*编辑：此方法在IE11中正常工作。在IE10中，如果#content div的内容需要滚动，则不会出现滚动条。布局工作思路。在IE＆lt; 10中它根本不起作用。

Answer 1

您可以使用 Flexbox 来实现此目标

通过this，您将获得所需

.content{ display:flex  } .content > div { flex: 1 auto; }

并注意浏览器支持

带有内联块div的页眉 - 页脚 - 内容布局占用剩余空间（没有浮动或溢出：隐藏）

1 个答案: