Html 如何使 div 缩放到浏览器宽度的 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16723522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make div scale to 100% of browser width?
提问by Derek
<div id="sidebar">sidebar</div>
<div id="content">content</div>
The sidebar is a fixed width of 100px. How do I make the width of content to 100% of the browser width?
侧边栏的固定宽度为 100px。如何使内容的宽度为浏览器宽度的 100%？
回答by Kevin Boucher
You can do this with simple CSS:
你可以用简单的 CSS 来做到这一点：
#sidebar {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
Updated with wrapperdiv:
用wrapperdiv更新：
HTML
HTML
<div id="wrapper">
<p>wrapper</p>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<p>wrapper</p>
</div>
CSS
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%;
}
Working example: http://jsfiddle.net/kboucher/FK2tL/
回答by RandomUs1r
You have to play with the width % just like the rest of us:
你必须像我们其他人一样使用宽度 % ：
#content {
background: green;
float: left;
width: 75%;
}
I'd also consider adding a parent div of width: 100% as per the box model.
我还考虑添加一个宽度为 100% 的父 div，根据盒模型。
回答by Sam
Just change your #content properties to this:
只需将您的 #content 属性更改为：
#content {
background: green;
float: left;
width: 100%;
margin-right: -200px;
}
So we are setting 100% width as you require, but offsetting the width of the other two DIVs. I learned this trick from CSS Zen Garden.
因此，我们根据您的需要设置 100% 宽度，但会抵消其他两个 DIV 的宽度。我从CSS Zen Garden学到了这个技巧。
