CODEWITHSUNDEEP
htmlcssheight
mike
mike

Reputation: 27085

How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div.

The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now, the background-color ends at the last piece of content in that div.

I've tried height:100%, min-height:100%;, etc.

Upvotes: 2702

Views: 2820441

Answers (30)

graham4765
graham4765

Reputation: 23

you should set the width and height using vw(viewport width) and vh(wiewport height). Put this in your css. divElement you can name whatever your div's id is.

#divElement {
height:100vh; 
width:100vw;
}

Also, make sure to put:

 <meta name="viewport" content="width=device-width, initial scale=1.0">

this should work. If it dosent, just comment and tell me what's wrong.

Upvotes: 0

Tariqul Islam
Tariqul Islam

Reputation: 103

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  min-height: 100vh;
}

.left-div {
  flex: 1;
  /* Other styles for left div */
}

.right-div {
  flex: 1;
  background-color: grey;
  /* Other styles for right div */
}
<div class="container">
  <div class="left-div">
    <!-- Content for left div -->
  </div>
  <div class="right-div">
    <!-- Content for right div -->
  </div>
</div>

Upvotes: 1

EMILO
EMILO

Reputation: 473

The simplest way is to do it like this.

div {
    background: red;
    height: 100vh;
}

body {
    margin: auto;
}
<div></div>

Upvotes: 20

Asker
Asker

Reputation: 1705

Amazingly, none of the >30 answers so far give the best solution:

min-height: 100vh

Upvotes: 4

MAZ
MAZ

Reputation: 901

2023 Update

The use of 100vh for setting the height of elements on mobile devices has been found to be unreliable, as browser UI may take up some of the screen size. Up until now, the only way to calculate the real height was by using JavaScript. However, with the introduction of new units in 2023, such as dvh, lhv, and svh, it is now possible to achieve dynamic height without the need for JavaScript. Google it to learn more about these units.

New code sample:

.yourElement {
  height: 100vh; /* fallback */
  height: 100dvh; /* dynamic viewport height */
}

Upvotes: 14

Jack Smith
Jack Smith

Reputation: 11

You can do this simply by adding padding and margin to the body of the page:

in css:

body {
    padding: 0px;
    margin: 0px;
}

and then retry the width: 100%; again and it should work just fine.

Upvotes: 0

denoryprogrammer
denoryprogrammer

Reputation: 70

try using 'height: 100%' on the body too.

Upvotes: 0

Dinesh Pandiyan
Dinesh Pandiyan

Reputation: 6299

100% works differently for width and height.

When you specify width: 100%, it means "take up 100% of the available width from the parent element or width of the window."

When you specify height: 100%, it only means "take up 100% of available height from the parent element." This means if you don't specify a height at a top level element, the height of all the children will be either 0 or height of the parent, and that is why you need to set the topmost element to have a min-height of window height.

I always specify the body to have a min-height of 100vh and it makes positioning and calculations easy,

body {
  min-height: 100vh;
}

Upvotes: 27

John Smith Optional
John Smith Optional

Reputation: 187

If you use position: absolute; and jQuery, you could use

$("#mydiv").css("height", $(document).height() + "px");

Upvotes: 2

zurfyx
zurfyx

Reputation: 32797

Even though this solution is done with jQuery, I thought it may be useful for anyone doing columns to fit the screen size.

For columns starting at the top of the page, this solution is the simplest.

body, html {
  height: 100%;
}

div#right {
  height: 100%
}

For columns that are not starting at the top of the page (for example: if they are starting below the header).

<script>
     $(document).ready(function () {
         var column_height = $("body").height();
         column_height = column_height - 100; // 100 is the header height
         column_height = column_height + "px";
         $("#column").css("height",column_height);
    });
</script>

The first method applies the body height to it and the columns as well, which means that is starting_pixels + height100%.

The second method gets the height of page shown to the user by getting the height of the body and then subtracts the header size to know how much height is left to display the column.

Upvotes: -3

lukaszkups
lukaszkups

Reputation: 5990

Try this - tested:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

In later versions, you can use vh:

#right, #left {
  height: 100vh
}

Upvotes: 29

Jamal S
Jamal S

Reputation: 1835

Actually what worked for me best was using the vh property.

In my React application I wanted the div to match the page high even when resized. I tried height: 100%;, overflow-y: auto;, but none of them worked when setting height:(your percent)vh; it worked as intended.

Note: if you are using padding, round corners, etc., make sure to subtract those values from your vh property percent or it adds extra height and make scroll bars appear. Here's my sample:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

Upvotes: 5

cletus
cletus

Reputation: 625307

You don't mention a few important details like:

  • Is the layout fixed width?
  • Are either or both of the columns fixed width?

Here's one possibility:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; /* Width optional */
}

#left {
  background: yellow;
  float: left;
  width: 360px; /* Width optional, but recommended */
}

#right {
  background: grey;
  margin-left: 360px; /* Must agree with previous width */
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

There are many variations on this depending on which columns need to be fixed and which are liquid. You can do this with absolute positioning too but I've generally found better results (particularly in terms of cross-browser) using floats instead.

Upvotes: 56

RamNiwas Sharma
RamNiwas Sharma

Reputation: 347

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100vh; /* Height window (vh) */
}
.wrapper .left{
  width: 80%; /* Width optional, but recommended */
}
.wrapper .right{
  width: 20%; /* Width optional, but recommended */
  background-color: #DD1F26;
}
<!--
vw: hundredths of the viewport width.
vh: hundredths of the viewport height.
vmin: hundredths of whichever is smaller, the viewport width or height.
vmax: hundredths of whichever is larger, the viewport width or height.
-->
<div class="wrapper">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>

Upvotes: 5

khalifeh
khalifeh

Reputation: 115

Just use the "vh" unit instead of "px", which means view-port height.

height: 100vh;

Upvotes: 8

Руслан
Руслан

Reputation: 705

100vw = 100% of the width of the viewport.

100vh = 100% of the height of the viewport.

If you want to set the div width or height 100% of browser-window-size you should use:

For width: 100vw

For height: 100vh

Or if you want to set it smaller size, use the CSS calc function. Example:

#example {
    width: calc(100vw - 32px)
}

Upvotes: 29

User128848244
User128848244

Reputation: 3480

Here is something that is not exactly like what you had in previous answers, but it could be helpful to some:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

Upvotes: 9

Djaouad
Djaouad

Reputation: 22784

You can use the view-port unit in CSS:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, and 1vh is 1% of screen height */
}

Upvotes: 151

Jonas Sandstedt
Jonas Sandstedt

Reputation: 1280

Here's a fix for the height.

In your CSS use:

#your-object: height: 100vh;

For browser that don't support vh-units, use modernizr.

Add this script (to add detection for vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
        var height = parseInt(window.innerHeight/2, 10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"], 10);

        bool = !!(compStyle == height);
    });
    return bool;
});

Finally use this function to add the height of the viewport to #your-object if the browser doesn't support vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height()) + 'px'});
    }
});

Upvotes: 31

James Donnelly
James Donnelly

Reputation: 128786

There are a couple of CSS 3 measurement units called:

Viewport-Percentage (or Viewport-Relative) Lengths

What are Viewport-Percentage Lengths?

From the linked W3 Candidate Recommendation above:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

How can this be used to make a divider fill the height of the browser?

For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

HTML
<div></div>
CSS
div {
    height: 100vh;
}

This is literally all that's needed. Here is a JSFiddle example of this in use.

What browsers support these new units?

This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out Can I use... for further support.

How can this be used with multiple columns?

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw.

How is 100vh different from 100%?

Take this layout for example:

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200 pixels height, 100% of 200 pixels becomes 200 pixels, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying JSFiddle to easily see the difference!

Upvotes: 3337

Sunderam Dubey
Sunderam Dubey

Reputation: 8837

If you set the html and body_ height to 100%, it will cover the whole page.

And if you set any particular div minimum height to 100%, so it will cover the whole window like this:

CSS

html, body {
  height: 100%;
}

div#some-div {
  min-height: 100%;
}

Remember

This will only work if the div's direct parent is body, as percentage always inherited from the direct parent and by doing the above CSS code you are telling the div to inherit the height 100% from the direct parent (body) and make it your min-height: 100%.

Another way

Simply set the div height to 100vh. It means 100 viewport height.

CSS

div#some-div {
  height: 100vh
}

Upvotes: 14

machineghost
machineghost

Reputation: 35795

Even with all of the answers here, I was surprised to find that none really solved the problem. If I used 100vh height/min-height, the layout broke when the content was longer than a page. If I instead used 100% height/min-height, the layout broke when the content was less than the page height.

The solution I found, which solved both cases, was to combine the top two answers:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

Upvotes: 29

SK-the-Learner
SK-the-Learner

Reputation: 543

A full page is called a 'viewport' and you can design an element according to its viewport in CSS 3.

Such units are called viewport-percentage lengths and are relative to the size of the initial containing block.

  • Viewport-Height is called vh. The complete height of a page is 100vh.
  • Viewport-Width is called vw. The complete height of a page is 100vw.
  • There also exist vmin (viewport minimum length) and vmax (viewport maximum length).

So now, your problem can easily be solved by adding the following to your CSS:

.classname-for-right-div /* You could also use an ID */ {
  height: 100vh;
}

Here is information about the Viewport-relative lengths.

Upvotes: 21

Priya Maheshwari
Priya Maheshwari

Reputation: 483

Now use height: 100vh; for a fixed window height:

<style>
    .header-top {
        height: 100vh;
        background: #000;
        color: #FFF;
        display: flex;
        align-items: center;
        padding: 10px;
        justify-content: space-around;
    }

    .header-top ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
    }

    .header-top ul li {
        padding:0px 10px;
    }
</style>

<div class="header-top">
    <div class="logo">Hello</div>
    <ul>
        <li>Menu</li>
        <li>About Us</li>
        <li>Contact US</li>
        <li>Login</li>
    </ul>
</div>

Upvotes: 5

Sunil R.
Sunil R.

Reputation: 881

Try this once...

* {
  padding: 0;
  margin: 0;
}

.parent_div {
  overflow: hidden;
  clear: both;
  color: #FFF;
  text-align: center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;
}
<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

Upvotes: 7

mohammad nazari
mohammad nazari

Reputation: 969

You can use the following CSS to make a div 100% of the height of the browser window:

display: block;
position: relative;
bottom: 0;
height: 100%;

Upvotes: 0

youcantryreachingme
youcantryreachingme

Reputation: 1155

Stupidly easy solution which supports cross-domain and also supports browser re-size.

<div style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

Adjust the iframe height property as required (leave the div height property at 100vh).

Why 80%? In my real-world scenario I have a header inside the div, before the iframe, which consumes some vertical space - so I set the iframe to use 80% instead of 100% (otherwise it would be the height of the containing div, but start after the header, and overflow out the bottom of the div).

Upvotes: -1

Alireza
Alireza

Reputation: 104870

You can use vh in this case which is relative to 1% of the height of the viewport...

That means if you want to cover off the height, just simply use 100vh.

Look at the image below I draw for you here:

How to make a div 100% height of the browser window?

Try the snippet I created for you as below:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>

Upvotes: 145

Rudra
Rudra

Reputation: 555

This stuff will resize height of content automatically according to your browser. I hope this will work for you. Just try this example given below.

You have to set up only height:100%.

html,body {
  height: 100%;
  margin: 0;
}
.content {
  height: 100%;
  min-height: 100%;
  position: relative;
}
.content-left {
  height: auto;
  min-height: 100%;
  float: left;
  background: #ddd;
  width: 50%;
  position: relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll  #aaa;
  width: 50%;
  position: relative;
  float: left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width: 50%;
  float: left;
  position: relative;
  overflow-y: scroll;
}
<div class='content' id='one'></div>
<div class='content-left' id='two'></div>

Upvotes: 3

Problem Child
Problem Child

Reputation: 585

Try the following CSS:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

Upvotes: 4

Related Questions