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)
This question is related to
css
fullscreen
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
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>Or even just:
<div id="full-size">
Your contents go here
</div>
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.)
#fullDiv {
height: 100%;
width: 100%;
left: 0;
top: 0;
overflow: hidden;
position: fixed;
}
Use the HTML
<div id="full-size">
<div id="wrapper">
Your content goes here.
</div>
</div>
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!
<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">
</div>
</html>
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.
#fullDiv {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow: hidden; /* or auto or scroll */
}
Source: Stackoverflow.com