Set size of HTML page and browser window

Question

I have a div element with ID  container   I want to set this element to be the size of the viewable area in the browser window  I am using the following JS to do so   var container  document getElementById  container    container style height  window innerHeight   container style width window innerWidth    However  the browser window size is larger than the viewable size and horizontal and vertical scroll bars appear  How do I make it so that my HTML page fits into the browser window without a need for scroll bars   EDIT   I am basically asking  how can I make the document size the same as the viewport size

User · Answer

lt html gt   lt head  gt   lt title gt Welcome lt  title gt       lt style type  text css  gt   maincontainer       top 0px  padding-top 0  margin auto  position relative  width 950px  height 100        lt  style gt     lt  head gt   lt body gt    lt div id  maincontainer   gt    lt  div gt   lt  body gt   lt  html gt

User · Answer

You could try    lt html gt       lt head gt           lt style gt               main                   width  500    Set to whatever                   height  500   Set to whatever                          lt  style gt       lt  head gt       lt body id  main  gt       lt  body gt   lt  html gt

User · Answer

You could use width  100   in your css

User · Answer

This should work    lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt Hello World lt  title gt           lt style gt              html  body                   width  100                   height  100                   margin  0                  padding  0                  background-color  green                             container                   width  inherit                  height  inherit                  margin  0                  padding  0                  background-color  pink                            h1                   margin  0                  padding  0                         lt  style gt       lt  head gt       lt body gt           lt div id  container  gt               lt h1 gt Hello World lt  h1 gt           lt  div gt       lt  body gt   lt  html gt    The background colors are there so you can see how this works  Copy this code to a file and open it in your browser  Try playing around with the CSS a bit and see what happens   The width  inherit  height  inherit  pulls the width and height from the parent element  This should be the default and is not truly necessary   Try removing the h1         CSS block and see what happens  You might notice the layout reacts in an odd way  This is because the h1 element is influencing the layout of its container  You could prevent this by declaring overflow  hidden  on the container or the body   I d also suggest you do some reading on the CSS Box Model

[html] Set size of HTML page and browser window

Examples related to html

Examples related to css

Examples related to resize

Examples related to scrollbar