如何使用固定的左/右，流体中间和固定页脚的3列布局？

Question

我怎么能有类似的布局？

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

值得一提的是：这是我当前的小提琴（我决定试用一张桌子，hrmmmm）。

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

其他： 评论中提到的Printscreen。在添加标题后向下拖动页面时发生。请参阅：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;包装器及其内部div上的table-cell;：

#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＆lt; = 7。

之外，所有浏览器都支持它

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

Answer 2

如果您不太关心源订单： http://dabblet.com/gist/3748868

它使用一些黑客来使页脚在较低的视口高度显示在屏幕上：

body {
    border-bottom: 100px solid; /* height of footer */
    box-sizing: border-box;
    }

此处解释了'border-box'属性：http://www.paulirish.com/2012/box-sizing-border-box-ftw/ 基本上，它的作用是，它使元素包含其中的边框和填充。因此，这里给予身体的底部边框将保留在视口内，而不是sans-border-box。
这使得它有点像一个可以由页脚容纳的负空间。我使用'border'是因为你可能想修补填充物 至于页脚，它是固定的，所以它相对于视口，而不是你用绝对定位得到的布局。因此它位于身体的底部边界的顶部（分享其高度值）。

中间区块是流动的，因为我给它'overflow：hidden'属性，它清除了浮点数（http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/）。它也可以在没有溢出的情况下工作，但它可能会导致问题 由于您希望能够在列内的内容大于内容高度时滚动，因此我在中间列中添加了一个容器，并将其溢出：auto。