Menu
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/
308
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent. so setting the 'width' to 'auto' would be better? Yes, but that's the default anyway.
There are new units that 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
171
.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.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
