3列响应式布局，带固定侧边栏

Question

您好我想创建一个3列响应式布局，其中一列（侧边栏）处于固定位置。

两个侧边栏的宽度都设置为百分比，而且还有最小值和最小值。 max-width属性，以像素为单位。 我希望中间的内容能填满两个侧边栏之间的所有空间。

我相信我可以使用JS来计算侧边栏的宽度，但我正在寻找最好的方法，希望只使用CSS。

它只需要支持IE9以下。

我附上一张图纸以便更好地理解，并感谢您的帮助。

Answer 1

尝试JsFiddle。请查看它是否是您要找的。

这里是html代码：

<header>Fixed Header</header>
<div id='container'>
    <nav>Navigation</nav>
    <article>Article</article>
    <footer>Footer</footer>
</div>
<aside>Fixed Aside</aside>

这里是css：

body
{
    text-align:center;
    padding:0;
    margin:0;
}

header
{
    height:50px;
    background:rgb(200,200,0);
    position:fixed;
    top:0;
    left:0;
    width:100%;
}

aside
{
    height:50px;
    background:rgb(200,0,0);
    position:fixed;
    top:50px;
    right:0;
    width:20%;
    height:700px;
}

#container
{
    margin-top:50px;
}

nav
{
    width:20%;
    float:left;
    height:700px;
    background:rgb(200,100,100);
}

article
{
    padding-right:20%;
}

footer
{
    clear:both;
    padding-right:20%;
    width:80%;
    background:gray;
    height:50px;
}

Answer 2

您应该尝试使用Bootstrap类，它们可以正常运行