<div id="sidebar">sidebar</div>
<div id="content">content</div>
侧边栏的固定宽度为100px。如何将内容宽度设置为浏览器宽度的100%?
答案 0 :(得分:13)
你可以用简单的CSS做到这一点:
#sidebar {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
已更新为wrapper
div:
<强> HTML 强>
<div id="wrapper">
<p>wrapper</p>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<p>wrapper</p>
</div>
<强> CSS 强>
* {
/* reset */
margin: 0;
padding: 0;
}
html,
body {
/* for demo purposes only */
height: 100%;
}
#wrapper {
/* for demo purposes only */
background: rgba(200, 200, 200, 0.6);
height: 100%;
}
#sidebar {
float: left;
width: 100px;
/* for demo purposes only */
background: rgba(200, 200, 200, 0.6);
height: 50%;
}
#content {
margin-left: 100px;
/* for demo purposes only */
background: rgba(200, 200, 200, 0.9);
height: 50%;
}
答案 1 :(得分:0)
你必须像我们其他人一样玩宽度%:
#content {
background: green;
float: left;
width: 75%;
}
我还考虑根据盒子模型添加宽度为100%的父div。
答案 2 :(得分:0)
只需将您的#content属性更改为:
#content {
background: green;
float: left;
width: 100%;
margin-right: -200px;
}
所以我们根据需要设置100%宽度,但是偏移其他两个DIV的宽度。我从CSS Zen Garden学到了这个技巧。