CODEWITHSUNDEEP
cssfullscreen
throwaway007
throwaway007

Reputation: 461

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

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)

Upvotes: 46

Views: 197942

Answers (8)

Lucas Matos
Lucas Matos

Reputation: 2916

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>

Upvotes: 1

JumpLink
JumpLink

Reputation: 507

#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}

Upvotes: 31

Dustin Young
Dustin Young

Reputation: 51

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.

Upvotes: 5

Zachary Anderson
Zachary Anderson

Reputation: 121

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

Upvotes: 11

mattbasta
mattbasta

Reputation: 13709

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!

Upvotes: 1

Robusto
Robusto

Reputation: 31913

#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}

Upvotes: 1

Bob
Bob

Reputation: 146

<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">

</div>
</html>

Upvotes: 6

lucideer
lucideer

Reputation: 3882

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.)

Upvotes: 44

Related Questions