Make div 100% Width of Browser Window
Question
I'm trying to make one of my containers 100% of the width of the screen.
Here is my 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
<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.
Updated: Here is my JS fiddle: http://jsfiddle.net/VkqjH/
5 answers
solution1
54 ACCPTED 2014-07-17 16:18:34
solution2
5 2014-07-17 16:22:42
.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.
solution3
4 2017-06-16 07:06:39
If width:100% works in any cases, just use that, otherwise you can use vw in this case which is relative to 1% of the width of the viewport.
That means if you want to cover off the width, just use 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>
solution4
0 2020-05-05 15:58:02
Set the margin for body at 0 and that will fix it.
body {
margin: 0;
}
solution5
-1 2014-07-17 16:18:53
试着给它一个定位：绝对；
solution6
-1 2014-07-22 14:39:45
Was able to figure it out using JavaScript
var winHeight = 0; /* Window height */
var winWidth = 0; /* Window width */
$(document).ready(function() {
setContainerDims();
function setContainerDims(){
winHeight = parseInt($(window).height());
winWidth = parseInt($(window).width());
$("#neo_home_container").css({"width":winWidth,"height":winHeight});
}
$(window).resize(function(){
setContainerDims();
})
});
solution7
-1 2019-10-22 18:13:17
position: absolute; is overlapping content.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.