css - 如何拥有固定左/右、流动中间和固定页脚的 3 列布局？

Question

我怎样才能有类似这样的布局？

我见过一些不太适合我的解决方案。我看到的示例和评论表明这是不可能的。 (图中缺少中间的溢出自动)。

物有所值:这是我目前的 fiddle (我决定试用一张 table ，hrmmmm)。

http://jsfiddle.net/valamas/m8R43/6/

附加: 评论中提到的打印屏幕。添加页眉后向下拖动/选择页面时发生。请参阅:http://dabblet.com/gist/3753308

Answer 1

您可以使用普通的 div。

一个包装器，三个内部 div，分别用于左侧、中间和右侧。包装器 div 下一个页脚。

<div id="wrapper">
    <div id="leftSide">
        left
    </div>
    <div id="middle">
        middle
    </div>
    <div id="rightSide">
        right
    </div>
</div>
<div id="footer">
        footer
    </div>

然后你使用display: table;和 table-cell; 在包装器及其内部 div 上:

#wrapper
{
    width: 100%;
    height: 400px; /*whatever*/
    display: table;
    padding: 0;
    margin: 0;
}

#left,
#middle,
#right
{
    display: table-cell;
}

设置左右元素的宽度，中间会神奇地填满空间。

#left
{
    width: 100px;
}

#middle
{
    background: #00f;
}

#right
{
    width: 200px;
}

display: table; 和 table-cell; 样式模仿表格的行为，但允许标记成为语义元素。

除IE<=7外所有浏览器均支持。

http://jsfiddle.net/Kyle_Sevenoaks/m8R43/9/