D

Dan Dascalescu

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!

Strange behavior with scrolling when the element is actually taller than the viewport. The container maintains the viewport height and the content flows out of the container. min-height:100vh seems to work around this.

@DGDD following on: there are plenty of other solutions here which work as far back as IE5, so there was no need for me to repeat what others have already said. This answer is solid enough for the majority of browsers released in the last 3 years since the spec was first introduced.

@DGDD this works on iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 and IEMobile 10.0. I don't know which mobile browser you're refering to, but those 4 make up over 90% of mobile browsers used. This question doesn't specify a requirement for working on mobile browsers.

@robross0606 again that is not the question I've answered here. That's a different question altogether, whose answer does indeed use flexbox: stackoverflow.com/questions/90178/…

Mobile alert: using vh mess with Chrome mobile which doesn't take into account its navbar. It then cover the top of your page with it. A serious issue if you have a menu there...

J

Josh Crozier

If you want to set the height of a <div> or any element, you should set the height of <body> and <html> to 100% too. Then you can set the height of element with 100% :)

Here is an example:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

Correct me if I'm wrong, But i think you also need to set the height to all the parents of the div, to actually work

This won't work if I am using continuing design: page 6000px height, with blocks representing pages. I want one block to be exactly the viewport's height.

@DanyY, you are right. You do need to set the height to all the parents of the div, with the implications of everything having the height of the screen. Here is an example.

This trick work for some cases but it wouldn't for some cases too, If you search for compatibility or more recommended way, you can view @James's Answer above :) Using Viewport Percentage Method :) , That's should work too. cheers

@Qwerty, here's the solution. Set css as so: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. So if you have 3 sections, it will be html { height: 300%; } body { height: 100%; } #div { height: 33.3% }

R

Ry-

If you’re able to absolutely position your elements,

position: absolute;
top: 0;
bottom: 0;

would do it.

This works by taking the element out of the document flow and cementing its bottom value to the height of its parent. This is not ideal when your content exceeds the height of its parent.

That does not work, when one of it's parents is set to position:relative and its height is not 100% of the viewport. It will adjust top and bottom to it's next relative or absolute ancestor.

P

Peter Mortensen

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, 1vh is 1% of screen height */
}

@Lamar You should use * { box-sizing: border-box; } to prevent that from happening.

Worth checking caniuse for browser support on viewport units: caniuse.com/#feat=viewport-units

A

Alireza

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:

https://i.stack.imgur.com/g0kUu.jpg

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; }

Giving 100vh added a vertical scroll for the page , so followed this one but didnt worked. stackoverflow.com/questions/44645465/…. Is there any way to avoid the vertical scroll and have the div touches the bottom without any content ?

@DILEEPTHOMAS look for existing paddings/margins

@Legends at the root file i tried giving as * {margin: 0, padding: 0} but didnt worked

@DILEEPTHOMAS take a look at this example here provided by Alireza, it also has a scrollbar because the body element has a margin. If you remove the margin the scrollbar is gone. It can have different causes, but this one I would checkout first.

m

mb21

All the other solutions, including the top-voted one with vh are sub-optimal when compared to the flex model solution.

With the advent of the CSS flex model, solving the 100% height problem becomes very, very easy: use height: 100%; display: flex on the parent, and flex: 1 on the child elements. They'll automatically take up all the available space in their container.

Note how simple the markup and the CSS are. No table hacks or anything.

The flex model is supported by all major browsers as well as IE11+.

html, body { height: 100%; } body { display: flex; } .left, .right { flex: 1; } .left { background: orange; } .right { background: cyan; }

left

right

Learn more about the flex model here.

a word of warning: when the content of one of the left/right containers exceeds the original body height, the opposite container won't get resized, so the containers end up with different heights then.

Example of the problem Schellmax points out: jsfiddle.net/Arete/b4g0o3pq

Depending on the design, overflow-y: auto; may avoid "containers exceeds the original body height".

the body also needs margin: 0px

I

Igor Ivancha

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 } Example

Left

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.

M

Mobarak Ali

This is what worked for me:

Use position:fixed instead of position:absolute, that way even if you scroll down the division will expand to the end of the screen.

This code with the "position: [ fixed | absolute]" is great for the backgrounds of popups (like when you click to zoom a picture) but not so sure in the cases when you need to actually scroll down. Still useful dough!

J

James Donnelly

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'});
    }
});

m

machineghost

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;
}

I have a fixed 90px height navbar so i just had to change your "100vh" to "calc(100vh - 90px)"

Р

Руслан

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

l

lukaszkups

Try this - tested:

body {
  min-height: 100%;
}

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

Edit: 2020 update:

You can use vh now:

#right, #left {
  height: 100vh
}

P

Peter Mortensen

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;
}

S

SK-the-Learner

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

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

J

James Donnelly

Add min-height: 100% and don't specify a height (or put it on auto). It totally did the job for me:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

E

EMILO

Simplest way is to do it like this.

div { background: red; height: 100vh; } body { margin: 0px; }

P

Penguin9

There are several methods available for setting the height of a <div> to 100%.

Method (A):

html, body { height: 100%; min-height: 100%; } .div-left { height: 100%; width: 50%; background: green; } .div-right { height: 100%; width: 50%; background: gray; }

Method (B) using vh:

html, body { height: 100%; min-height: 100%; } .div-left { height: 100vh; width: 50%; background: green; float: left; } .div-right { height: 100vh; width: 50%; background: gray; float: right; }

Method (c) using flex box:

html, body { height: 100%; min-height: 100%; } .wrapper { height: 100%; min-height: 100%; display: flex; } .div-left { width: 50%; background: green; } .div-right { width: 50%; background: gray; }

d

dippas

Try to set height:100% in html & body

html, 
body {
    height: 100%;
}

And if you want to 2 div height same use or set the parent element display:flex property.

P

Peter Mortensen

This worked for me:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

Taken from this page.

P

Peter Mortensen

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/

M

Michael Benjamin

Block elements consume the full width of their parent, by default.

This is how they meet their design requirement, which is to stack vertically.

9.4.1 Block formatting contexts In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

This behavior, however, does not extend to height.

By default, most elements are the height of their content (height: auto).

Unlike with width, you need to specify a height if you want extra space.

Therefore, keep these two things in mind:

unless you want full width, you need to define the width of a block element

unless you want content height, you need to define the height of an element

.Contact { display: flex; /* full width by default */ min-height: 100vh; /* use full height of viewport, at a minimum */ } .left { flex: 0 0 60%; background-color: tomato; } .right { flex: 1; background-color: pink; } body { margin: 0; } /* remove default margins */

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

S

Sunderam Dubey

if you set html and body height to 100% so it will cover whole page and if you set any particular div minimum height to 100% so it will cover whole window like this:

CSS

html,body{
 height:100%;
}

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

}

REMEMBER

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

Another way

simply put div height to 100vh,its mean 100 viewport height

CSS

div#some-div{
 height:100vh

}

Very good and clean:)))

P

Peter Mortensen

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

height: 100vh;

P

Peter Mortensen

One of the options is using CSS table. It has great browser support and even works in Internet Explorer 8.

JSFiddle Example

html, body { height: 100%; margin: 0; } .container { display: table; width: 100%; height: 100%; } .left, .right { display: table-cell; width: 50%; } .right { background: grey; }

S

Sunil R.

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; }

Left

Right

h

halfer

Use FlexBox CSS

Flexbox is a perfect fit for this type of problem. While mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They’ll automatically take up all the available space in their container.

T

Thuc Nguyen

You can use display: flex and height: 100vh

html, body { height: 100%; margin: 0px; } body { display: flex; } .left, .right { flex: 1; } .left { background: orange; } .right { background: cyan; }

left

right

There are already several flexbox solutions posted, including one with this exact implementation posted only 26 days before this answer.

b

bilal BOUASRIA

You need to do two things, one is to set the height to 100% which you already did. Second is set the position to absolute. That should do the trick.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

Source

Outdated solution. Use vh instead.

Don't use vh if you plan to use responsive design on mobile devices.

P

Peter Mortensen

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);
}

By the way, you mention 'rounded corners' affecting the height of your element, I expect setting box-sizing: border-box; would overcome this, it means that the border size is also taken into account when calculating the size (width and height) of the element.

S

SK-the-Learner

.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; }

Left

Right

Possible misspelling: widht (near the end)

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

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US