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

Question

I have a (relatively) simple layout, with fixed header and footer divs. 我有一个（相对）简单的布局，具有固定的页眉和页脚div。 The content div is split in two "full height" divs with display: inline-block; 内容div分为两个“全高”div， display: inline-block; . 。 The left div is used for navigation and the right one for the actual content and has overflow-y: scroll; 左侧div用于导航，右侧用于实际内容，并具有overflow-y: scroll; . 。 The problem is that I cannot set the width of the right div to fill the remaining space. 问题是我无法设置右侧div的宽度来填充剩余空间。 I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats. 我尝试过使用浮动（作为最后的手段），但正确的div被向下推，老实说，我宁愿不使用花车。

Is filling the remaining width possible in my scenario? 在我的场景中填充剩余宽度吗？ I would very much like to not hardcode the width of the right div. 我非常想不硬编码右div的宽度。

Here's the JSFiddle example . 这是JSFiddle示例。

Simple HTML structure: 简单的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 excerpt: 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; }

Edit : 编辑：

Thanks to Prasanth's answer , I was able to achieve what I wanted. 感谢Prasanth的回答，我能够实现我想要的。 The solution was to set 解决方案是设置

display:flex; flex-direction:row; on the #content div and 在#content div和
width: 100%; on the #textContent div. 在#textContent div上。

~~Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results. 在IE 11上进行测试（在兼容模式下向下）不会产生不需要的结果。~~ * The new version can be found here . *新版本可在此处找到。

*Edit: This method works properly in IE11. *编辑：此方法在IE11中正常工作。 In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. 在IE10中，如果#content div的内容需要滚动，则不会出现滚动条。 The layout works thought. 布局工作思路。 In IE <10 it does not work at all. 在IE <10中，它根本不起作用。

Answer 1

You can use Flexbox to achieve this 您可以使用Flexbox来实现此目的

Go through this and you will get what you need 通过这个，你会得到你需要的

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

and beware of browser support 并提防浏览器支持

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-02-18 08:21:32

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-02-18 08:21:32

解决方案1
2 已采纳 2014-02-18 08:21:32