响应2列CSS布局包括与固定宽度边栏？(Responsive 2-column CSS layout

无法找到一个解决方案（我猜一定是一个很常见的问题）的任何地方。

我创建一个侧边栏，边栏需要具有200像素的固定宽度和具有未知高度响应式设计。我怎样才能使它所以主要内容区域占用所有剩余宽度，没有任何行为不端。

我来给它最接近的是下面的，但它的问题是，侧边栏可以重叠页脚。任何人都可以提出一个修正我的代码，或与我分享一些代码工作的？

            * {
            padding: 0;
            margin: 0;
            outline: 0;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
        }
        body {
            background: orange;
        }
        #container {
            max-width: 1000px;
            min-width: 768px;
            margin: 0 auto;
            background: yellow;
            position: relative;
            height: 100%;
        }
        #header {
            background: purple;
            color: white;
            text-align: center;
            padding: 10px;
        }
        #main {
            position: relative;
        }
        aside {
            background: blue;
            width: 200px;
            color: white;

            position: absolute;
            top: 0;

            /* change this to "right: 0;" if you want the aside on the right. Also, change the "margin-left" code, below. */
            left: 0;

            padding-top: 20px;
            padding-bottom: 20px;

            padding-left: 10px; /* If you change this value, remember to change the margin-left value of #primary */
            padding-right: 10px; /* ditto */
        }
        #primary {
            background: red;

            /* change this to margin-right if you want the aside on the right. Also change the "left" code, above. */
            margin-left: 220px; /* aside_width + aside_left_padding + aside_right_padding = 200px + 10px + 10px */
            padding: 1em; /* whatever */
        }
        #footer {
            background: green;
            color: white;
            padding: 10px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }

        <div id="container">
        <div id="header">
            <h1>LAYOUT TEST #2</h1>
        </div>
        <div id="main">
            <div id="primary">
                <h2>THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT</h2>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <h2>sub heading</h2>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <h2>sub heading</h2>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
            </div>
            <aside>
                <h3>navigation (left)</h3>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
            </aside>
        </div>
        <div id="footer">
            <h1>LAYOUT TEST #2</h1>
        </div>
    </div>

Answer 1:

我认为这种方法与所有这些position: absolute不是最好的一个。

你想有一个容器元素max-width和margin: 0 auto 。不知道为什么，你可能需要一个min-width为好; 你当然可以。
你自动把任何块元素通吃width的父元素。因此，有一个与页眉和页脚没有问题，只是在合适的地方放置它们，它们会正确显示。
当你正确地做到了，用一个容器元素，为您的主要部分。由于元素呈现左到右，你可能想要写aside的前#primary 。
适用float: left到aside与你期望的固定宽度。
主要内容#primary元素会自动拍摄剩余空间（或仅仅适用width: auto 注意： 剩余空间是父元素的剩余空间，因此，如果您设置的min-width的父元素上，不要”不要指望你的#primary更窄！
现在你将有一个问题：容器元素#main不会得到适当的高度。 这是因为有问题的float 。要强制父元素去其浮儿童的身高，使用overflow: hidden 。

你应该准备好了。下面是你的代码稍加修改。

Answer 2:

1 =有Flexbox的： http://jsfiddle.net/rudiedirkx/CjWbv/2/

#main {
    display: flex;
}
#primary {
    background: #bbb;
    flex: 1;
}
aside {
    background: #ddd;
    flex: 0 0 200px;
}

2 =与calc() http://jsfiddle.net/rudiedirkx/CjWbv/

#main:after { clearfix here }
#primary {
    float: left;
    background: #bbb;
    width: calc(100% - 200px);
}
aside {
    background: #ddd;
    float: right;
    width: 200px;
}

双方将需要为旧版浏览器（和供应商前缀）回退。从其他的答案中随意挑选。

Answer 3:

直到我们得到Flexbox的，我相信你在找什么是简单地使用CSS的最佳方式display: table; 。您将需要设置容器display: table; ，然后每个列，只设定为display: table-cell; 。这将消除使用浮筒或任何其他JS魔法的需要。此外，该工程回IE8。我知道它使用与布局单词“表”什么感觉过于简略，不过只是试一试。

看看这个链接获取更多信息。

这里是你的代码的更新版本。

编辑：示例代码

HTML：假设这个标记

<div id="main">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

CSS：

#main {
    display: table;
    width: 100%;
}
#sidebar {
    display: table-cell;
    width: 200px;
}
#content {
    display: table-cell;
    /* no need to specify width. 
     * width will auto fill remaining width of parent `table` #main.
     * so 100% - 200px */
}

Answer 4:

#main { position: relative; overflow:hidden;}

这将停止栏行为不端。

Answer 5:

你可以添加修复margin-bottom: FOOTER_HEIGHT到aside ，或者使用下面的方法来代替：

<div id="container">
    <div id="header">
        YOUR_HEADER
    </div>
    <div id="body>
        <div id="sidebar">
            YOUR_SIDE_BAR_CONTENT
        </div>
        <div id="main">
            YOUR_CONTENT
        </div>
        <br />
    </div>
    <div id="footer">
        YOUR_FOOTER
    </div>
</div>

和CSS：

#sidebar {
    width: ...;
    height: ...;
    float: right;
}
#main {
    margin-right: WIDTH_OF_SIDE_BAR;
}
#body > br {
    clear: both;
}

文章来源: Responsive 2-column CSS layout including sidebar with fixed width?