使用流体中心实现 3 列布局的正确方法是什么答案

【问题标题】：What's the Proper way to achieve 3-Column layout with fluid center使用流体中心实现 3 列布局的正确方法是什么
【发布时间】：2011-10-13 01:53:52
【问题描述】：

我正在研究一个 3 列布局，其中包含两个固定宽度的侧边栏（左侧和右侧）和一个流体中心。我关注了 A List Apart 的 Holy Grail article，虽然这在大多数浏览器中都可以正常工作，但在 Internet Explorer 7+ 中我遇到了一些问题。

IE 7+ 的问题实际上并不源于这种技术，而是源于页面以怪异模式呈现的事实。但是，如果我让它以符合标准的模式呈现，许多过时的元素会被替换，需要完全重写。

鉴于这篇文章是几年前的，这是关于这个主题的最新参考吗？还是我应该应用不同的技术？

我们将不胜感激任何有关最佳方法的见解。

【问题讨论】：

标签： html css fluid-layout

【解决方案1】：

浮动列真的没有意义。

HTML：

<div id="wrapper">
    <div id="left"></div>
    <div id="center"> Center content</div>
    <div id="right"></div>
</div>

CSS：

#left {
    position:absolute;
    left:0;
    width:50px;
    height:100%;
    background-color:pink;
}

#center {
    height:100%;
    margin: 0 50px;
    background-color:green;
}

#right {
    position:absolute;
    right:0;
    top:0;
    width:50px;
    height:100%;
    background-color:red;
}

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

演示：http://jsfiddle.net/AlienWebguy/ykAPM/

【讨论】：

如果左（或右）列高于内容，您的布局会做什么？你的页脚在哪里？
包装器的上方和下方，在一个新的包装器中。
轻松解决令人讨厌的长铁路 ;) jsfiddle.net/AlienWebguy/ykAPM/3
这行得通except，因为如果你在中心列上设置min-width，当浏览器调整大小时，右列将浮动在它的顶部。关于如何防止这种情况发生的任何想法？
为什么要在中心列上设置min-width？如果您关心重叠，请在 #wrapper 或 body 上设置最小宽度。

【解决方案2】：

绝对定位适用于全宽页面，但是当您有一个居中的固定宽度时呢？提出了一个基于 flex-box 的解决方案，适用于 IE8+。 flexie polyfill 用于旧版浏览器

见http://jsfiddle.net/lorantd/9GFwT/10/

<div id="header"></div>
<div id="main">    
    <div id="menu"></div>
    <div id="content"></div>
    <div id="summary"></div>
</div>
<div id="footer"></div>

#header {
    background-color: #9B9EA7;
    height: 70px;
}

body {
    min-width: 500px;
    max-width: 630px;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

#main {
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    display:-webkit-box; /* Safari and Chrome */
    display:box;
    width: 100%;
}

#menu {
    background-color: #D42108;
    width: 120px;
    margin-top: 10px;
    margin-right: 10px;
}

#content {
    background-color: #FFD700;
    height: 500px;
    margin-top: 10px;
    margin-right: 10px;
    -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 2;         /* OLD - Firefox 19- */
    width: 60%;               /* For old syntax, otherwise collapses. */
    -webkit-flex: 2;          /* Chrome */
    -ms-flex: 2;              /* IE 10 */
    flex: 2;   
}

#summary {
    width: 30px;
    margin-top: 10px;
    background-color: #9B9EA7;
}

#footer {
    background-color: #353535;
    width: 100%;
    height: 50px;
    margin-top: 10px;
    clear: both;
}

【讨论】：

【解决方案3】：

我相信这在大多数情况下应该很有用。

请看下面的链接。

http://jsfiddle.net/ykAPM/278/

#left {
position:fixed;
left:0;
width:50px;
height:100%;
background-color:pink;
}

#center {
margin: 0 50px;
background-color:green;
overflow:auto
}

#right {
position:fixed;
right:0;
top:0;
width:50px;
height:100%;
background-color:red;
}

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

#test{
height:1000px;
}

【讨论】：