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

user_394450 0
Viewed 176625

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)

fullscreen css
8 Answers
#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}
user_14659190

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_107510140

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

function myFunction() {
  var element = document.getElementById("main");
  element.classList.add("container");
}
.container{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #333;
  margin: 0; 
  padding: 0; 
}
<div id="main"></div>
<button onclick="myFunction()">Try it</button>

user_10038310
Related