html响应式五栏布局,HTML – 响应式2列CSS布局,包括固定宽度的侧边栏？

在任何地方找不到解决方案(我猜这一定是一个非常常见的问题).

我正在创建一个带侧边栏的响应式设计,其中侧边栏需要具有200px的固定宽度并且具有未知高度.我怎样才能使主要内容区占据所有剩余的宽度,而不会有任何不当行为.

最接近我的是以下内容,但问题在于侧边栏可以与页脚重叠.任何人都可以建议修复我的代码,或与我分享一些有效的代码？

* {

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;

}