Html 如何将 div 宽度设置为 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3501772/
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 set div width to 100%
提问by penguru
I'm trying to design a 2 column layout using divs. My left column size is fixed to 150 px. But right column is not fixed size, so I want it to extend to right boundary of the browser. I used width:autoand width:100%values in right column but they didn't work.
我正在尝试使用 div 设计一个 2 列布局。我的左列大小固定为150 px. 但是右列不是固定大小，所以我希望它扩展到浏览器的右边界。我在右栏中使用了width:auto和width:100%值，但它们不起作用。
CSS :
CSS :
html { height:100%; width:100% } body { color: #000040; text-align: left; padding:0; margin:0; height:100%; width:100% } #header { position:relative; float:left; background-color: #000053; width: 100%; height: 76px } #wrapper { position:relative; overflow:hidden; width:100%; height: 100%; margin:0px auto; padding:0; background-color:Aqua } #container { clear:left; float:left; overflow:hidden; width:100%; height:100% } #left_column { position: relative; float: left; background-color:Fuchsia; width: 150px; overflow:hidden; height:100% } #right_column { position: relative; float:left; overflow:hidden; background-color:Blue; height: 100%; width:auto }
html { height:100%; width:100% } body { color: #000040; text-align: left; padding:0; margin:0; height:100%; width:100% } #header { position:relative; float:left; background-color: #000053; width: 100%; height: 76px } #wrapper { position:relative; overflow:hidden; width:100%; height: 100%; margin:0px auto; padding:0; background-color:Aqua } #container { clear:left; float:left; overflow:hidden; width:100%; height:100% } #left_column { position: relative; float: left; background-color:Fuchsia; width: 150px; overflow:hidden; height:100% } #right_column { position: relative; float:left; overflow:hidden; background-color:Blue; height: 100%; width:auto }
HTML
HTML
<html>
<body>
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="container">
<div id="left_column">
LEFT COLUMN
</div>
<div id="right_column">
RIGHT COLUMN
</div>
</div>
</div>
</body>
</html>
回答by jeroen
I would remove all positionstatements and only put a float:lefton the left column, not the right nor the container. Give the right column a margin-left:150pxand it should work fine.
我会删除所有position语句，只float:left在左列上放一个，而不是右列和容器。给右列a margin-left:150px，它应该可以正常工作。
Except for the left-floated column, you can also remove the width:100%statements from the rest; when they're not floated, they'll be 100% wide automatically.
除了左浮动列，您还可以width:100%从其余的列中删除语句；当它们没有浮动时，它们会自动变成 100% 宽。
The overflow:hiddenis only needed on the wrapper; at least if you are using it to have the divgrow in height to accommodate the floats inside it.
该overflow:hidden只需要在包装纸; 至少如果您使用它来div增加高度以容纳其中的漂浮物。
回答by Sotiris
change for the div right_column the position from relative to fixed, and width from auto to 100%. Also add left:150px; With these changes you css for right_column will look like the following:
将 div right_column 的位置从相对更改为固定，宽度从自动更改为 100%。还添加 left:150px; 通过这些更改，right_column 的 css 将如下所示：
#right_column {
position: fixed;
left:150px;
float:left;
overflow:hidden;
background-color:Blue;
height: 100%;
width:100%; }
you can check it here http://jsbin.com/ejetu3
你可以在这里查看http://jsbin.com/ejetu3
