在任何地方都找不到这个问题的解决方案(我猜这一定是一个非常常见的问题)。
我正在创建一个带有侧边栏的响应式设计,其中侧边栏需要具有 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;
}
<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>
1 = 使用弹性盒: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;
}
两者都需要对旧版浏览器(和供应商前缀)进行回退。从其他答案中选择。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)