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                     amp  link  text-decoration  none  color   FFF                    amp  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    lt body gt   lt div id  neo wrapper  gt       lt div id  neo main container1  gt    lt  -- Start container1 -- gt           lt div id  neo scroll button  onClick  scrollBelow    gt               lt p gt Enter lt  p gt           lt  div gt       lt  div gt    lt  -- End of container1 -- gt       lt div id  neo main container2  gt    lt  -- Start container2 -- gt           lt div id  neo img container  gt               lt img src  http   fpoimagery com  t px amp w 350 amp h 250 amp bg 0ff amp fg 000000    gt           lt  div gt           lt div id  neo text container  gt               lt p gt 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  lt  p gt           lt  div gt       lt  div gt    lt  -- End container2 -- gt   lt  div gt      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

User · Accepted Answer

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

User · Answer

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    x000D   x000D   full-width   x000D    width  100vw  x000D    height  100px  x000D    margin-bottom  40px  x000D    background-color  red  x000D    x000D   x000D   one-vw-width   x000D    width  1vw  x000D    height  100px  x000D    background-color  red  x000D    x000D   lt div class  full-width  gt  lt  div gt  x000D   lt div class  one-vw-width  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Set the margin for body at 0 and that will fix it   body      margin  0

User · Answer

Try to give it a postion  absolute

[html] Make div 100% Width of Browser Window

Examples related to html

Examples related to css

Examples related to sass

Examples related to fullscreen