在任何地方找不到解决方案(我猜这一定是一个非常常见的问题).
我正在创建一个带侧边栏的响应式设计,其中侧边栏需要具有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;
}
LAYOUT TEST #2
THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
sub heading
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
sub heading
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
navigation (left)
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
