Geek Answers Handbook

Make div 100% browser window wide

I am trying to make one of my containers 100% of the screen width.

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 full screen width. Obviously, because it is a child of #neo_wrapper, setting the width to 100% will make it 960px. I am sure how to get around this problem, so any help would be appreciated.

Updated: Here is my JS script: http://jsfiddle.net/VkqjH/

+7
html css sass fullscreen
source share
5 answers

There are new units you can use:

vw - viewport width

vh - viewport height

 #neo_main_container1 { width: 100%; //fallback width: 100vw; }

Help / MDN

Opera Mini does not support this, but you can use it in all other modern browsers.

Caniuse

enter image description here

+25
source share
 .myDiv { background-color: red; width: 100%; min-height: 100vh; max-height: 100%; position: absolute; top: 0; left: 0; margin: 0 auto; }

Basically, we fix the position of the div regardless of its parent , and then position it using margin: 0 auto; and sets its position in the upper left corner.

+4
source share

Try to give it a position: absolute;

0
source share

If width:100% works anyway, just use this, otherwise you can use vw in this case, which refers to 1% of the width of the viewport.

This means that if you want to cover the width, just use 100vw .

Take a look at the image I am painting for you here:

enter image description here

Try the snippet I created for you, as shown 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>
0
source share

It was possible to understand this 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(); }) });
-one
source share

More articles:


All Articles