Html 使 div 为浏览器窗口的 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24808661/
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
Make div 100% Width of Browser Window
提问by Mike K.
I'm trying to make one of my containers 100% of the width of the screen.
我正在尝试使我的容器之一达到屏幕宽度的 100%。
Here is my SASS
这是我的 SASS
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#neo_wrapper {
width: 960px;
height: 1500px;
margin: 0 auto;
#neo_main_container1 { /* Slide1 container */
width: 100%;
height: 100%;
margin: 0 auto;
background: #999999;
z-index: 350;
#neo_scroll_button { /* Div that enables scroll */
position: absolute;
bottom: 35px;
left: 0;
right: 0;
margin: 0 auto;
width: 150px;
height: 15px;
background: #F00;
color: #FFF;
text-align: center;
line-height: 15px;
display: table;
a {
&:link {text-decoration: none; color: #FFF;}
&:visited {text-decoration: none; color: #FFF;}
}
}
}
#neo_main_container2 {
width: 100%;
height: 100%;
margin: 0 auto;
background: #CCC;
z-index: 300;
#neo_img_container {
float: left;
width: 350px;
height: 500px;
margin: 0 auto;
margin-right: 15px;
}
#neo_text_container {
float: left;
width: 50%;
height: 500px;
margin: 0 auto;
}
}
}
And HTML
和 HTML
<body>
<div id="neo_wrapper">
<div id="neo_main_container1"> <!-- Start container1 -->
<div id="neo_scroll_button" onClick="scrollBelow()">
<p>Enter</p>
</div>
</div> <!-- End of container1 -->
<div id="neo_main_container2"> <!-- Start container2 -->
<div id="neo_img_container">
<img src="http://fpoimagery.com/?t=px&w=350&h=250&bg=0ff&fg=000000" />
</div>
<div id="neo_text_container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div> <!-- End container2 -->
</div>
I want #neo_main_container1 to be the full width of the screen. Obviously because it's a child of #neo_wrapper, setting width to 100% will make it 960px. I'm sure how to circumvent this issue, so any help would be appreciated.
我希望 #neo_main_container1 是屏幕的全宽。显然因为它是#neo_wrapper 的子级，所以将宽度设置为 100% 将使其为 960px。我确定如何规避这个问题，所以任何帮助将不胜感激。
Updated: Here is my JS fiddle: http://jsfiddle.net/VkqjH/
更新：这是我的 JS 小提琴：http: //jsfiddle.net/VkqjH/
回答by Luke
There are new units that you can use:
您可以使用以下新单位：
vw- viewport width
vw- 视口宽度
vh- viewport height
vh- 视口高度
#neo_main_container1
{
width: 100%; //fallback
width: 100vw;
}
Opera Mini does not support this, but you can use it in all other modern browsers.
Opera Mini 不支持此功能，但您可以在所有其他现代浏览器中使用它。
回答by Christopher 'Solidus' DeJong
.myDiv {
background-color: red;
width: 100%;
min-height: 100vh;
max-height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
}
Basically, we're fixing the div's position regardless of it's parent, and then position it using margin: 0 auto; and settings its position at the top left corner.
基本上，我们正在修复 div 的位置，而不管它是 parent，然后使用 margin: 0 auto; 来定位它。并将其位置设置在左上角。
回答by Alireza
If width:100%works in any cases, just use that, otherwise you can use vwin this case which is relative to 1% of the width of the viewport.
如果width:100%在任何情况下都有效，请使用它，否则您可以vw在这种情况下使用相对于视口宽度的 1% 的值。
That means if you want to cover off the width, just use 100vw.
这意味着如果你想覆盖宽度，只需使用100vw.
Look at the image I draw for you here:
看看我在这里为你画的图：
Try the snippet I created for you as below:
试试我为你创建的片段，如下所示：
.full-width {
width: 100vw;
height: 100px;
margin-bottom: 40px;
background-color: red;
}
.one-vw-width {
width: 1vw;
height: 100px;
background-color: red;
}<div class="full-width"></div>
<div class="one-vw-width"></div>回答by Elly
Set the margin for body at 0 and that will fix it.
将 body 的边距设置为 0，这将修复它。
body {
margin: 0;
}
回答by Doug Steinberg
Try to give it a postion: absolute;
试着给它一个定位：绝对；
