how to make a full screen div and prevent size to be changed by content

Question

for my web application  i would like the main div to be full screen  both width and height   100    and regardless of content  i want it to stay at that size  that means  if there are not much content  it shouldn t shrink  and if there are too much content  it shouldn t push this main div   how can i do this    i m ok with hacks applied to this div  as long as it will keep contents hack-free

User · Answer

fullDiv       height  100       width  100       left  0      top  0      overflow  hidden      position  fixed

User · Answer

Here is my Solution  I think will better to use vh  viewport height  and vw for  viewport width   units regarding to the height and width of the current viewport  x000D   x000D  function myFunction       var element   document getElementById  main      element classList add  container      x000D   container    height  100vh    width  100vw    overflow  hidden    background-color   333    margin  0     padding  0     x000D   lt div id  main  gt  lt  div gt   lt button onclick  myFunction    gt Try it lt  button gt  x000D   x000D   x000D

User · Answer

lt html gt   lt div style  width 100   height 100   position fixed  left 0 top 0 overflow hidden   gt    lt  div gt   lt  html gt

User · Answer

Notice how most of these can only be used WITHOUT a DOCTYPE  I m looking for the same answer  but I have a DOCTYPE  There is one way to do it with a DOCTYPE however  although it doesn t apply to the style of my site  but it will work on the type of page you want to create   div full-size      position  absolute      top 0      bottom 0      right 0      left 0      overflow hidden    Now  this was mentioned earlier but I just wanted to clarify that this is normally used with a DOCTYPE  height 100   only works without a DOCTYPE

User · Answer

Use the HTML   lt div id  full-size  gt       lt div id  wrapper  gt          Your content goes here       lt  div gt   lt  div gt    and use the CSS   html  body  margin 0 padding 0 height 100     full-size       height 100       width 100       position absolute      top 0      left 0      overflow hidden     wrapper         You can add padding and margins here        padding 0      margin 0      Make sure that the HTML is in the root element   Hope this helps

User · Answer

fullDiv     position  absolute    margin  0    padding  0    left  0    top  0    bottom  0    right  0    overflow  hidden     or auto or scroll

User · Answer

I use this approach for drawing a modal overlay    fullDiv   width 100   height 100   position fixed     I believe the distinction here is the use of position fixed which may or may not be applicable to your use case   I also add z-index 1000  background rgba 50 50 50  7   Then  the modal content can live inside that div  and any content that was already on the page remains visible in the background but covered by the overlay fully while scrolling

User · Answer

Or even just    lt div id  full-size  gt    Your contents go here  lt  div gt    html body  margin 0  padding 0  height 100   width 100      full-size    height 100     width 100     overflow hidden     or overflow auto  if you want scrollbars         html  body can be set to like   95 -99  or some such to account for slight inconsistencies in margins  etc

[css] how to make a full screen div, and prevent size to be changed by content?

Examples related to css

Examples related to fullscreen