How to make a div 100% height of the browser window - html
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.
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!
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%;
}
If you’re able to absolutely position your elements,
position: absolute;
top: 0;
bottom: 0;
would do it.
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 */
}
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:
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>
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;
}
<div class="left">left</div>
<div class="right">right</div>
Learn more about the flex model here.
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.
This is what worked for me:
<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>
Use position:fixed instead of position:absolute, that way even if you scroll down the division will expand to the end of the screen.
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'});
}
});
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;
}
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)
}
Try this - tested:
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
In later versions, you can use vh:
#right, #left {
height: 100vh
}
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;
}
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
}
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.
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%;
}
The simplest way is to do it like this.
div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}
<div></div>
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;
}
<div class="div-left"></div>
<div class="div-right"></div>
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;
}
<div class="div-left"></div>
<div class="div-right"></div>
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;
}
<div class="wrapper">
<div class="div-left"></div>
<div class="div-right"></div>
</div>
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.
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.
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/
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 */
<div class="Contact">
<section class="left">
<div class="">
<h1>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.</h1>
</div>
</section>
<section class="right">
<img />
</section>
</div>
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;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
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>
Just use the "vh" unit instead of "px", which means view-port height.
height: 100vh;
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.
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;
}
<div class="left">left</div>
<div class="right">right</div>
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
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>
.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>
Related
Set absolute div to height of browser [duplicate]
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.
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!
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%;
}
If you’re able to absolutely position your elements, position: absolute; top: 0; bottom: 0; would do it.
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 */
}
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:
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>
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;
}
<div class="left">left</div>
<div class="right">right</div>
Learn more about the flex model here.
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.
This is what worked for me: <div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div> Use position:fixed instead of position:absolute, that way even if you scroll down the division will expand to the end of the screen.
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'});
}
});
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;
}
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)
}
Try this - tested:
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
In later versions, you can use vh:
#right, #left {
height: 100vh
}
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;
}
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
}
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.
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%;
}
The simplest way is to do it like this.
div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}
<div></div>
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;
}
<div class="div-left"></div>
<div class="div-right"></div>
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;
}
<div class="div-left"></div>
<div class="div-right"></div>
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;
}
<div class="wrapper">
<div class="div-left"></div>
<div class="div-right"></div>
</div>
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.
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.
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/
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 */
<div class="Contact">
<section class="left">
<div class="">
<h1>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.</h1>
</div>
</section>
<section class="right">
<img />
</section>
</div>
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;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
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>
Just use the "vh" unit instead of "px", which means view-port height. height: 100vh;
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.
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;
}
<div class="left">left</div>
<div class="right">right</div>
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
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>
.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>
Vertically center element without it becoming inaccessible offscreen
I'm trying to center an element in the middle of the page. I can center it just fine, but if I resize the page vertically until the view height is smaller than the centered element, the element goes offscreen vertically without a scrollbar. You can see a demonstration of the issue here:
http://codepen.io/mse/pen/BWayXV
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.outer {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.inner {
display: inline-block;
width: 400px;
height: 800px;
background: grey;
}
<div class="outer">
<div class="inner"></div>
</div>
I should mention that I have tried a couple of other methods of vertical centering, including flexbox, and I'm still running into the same issue. Is there a way to solve this problem with this method of vertical centering, or is there at least a vertical centering method that does not have this issue?
Try this
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.outer {
display:flex;
justify-content:center;
align-items:center;
}
.inner {
background: #ccc;
width: 400px;
height: 600px
}
<div class="outer">
<div class="inner"> I'm a block-level element centered vertically within my parent.</div>
</div>
More info: https://css-tricks.com/centering-css-complete-guide/
CSS VH center generator: http://howtocenterincss.com/
This should work
* {
padding: 0;
margin: 0;
}
html, body {
height: 100vh;
}
.outer {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 400px;
height: 800px;
background: grey;
}
<div class="outer">
<div class="inner"></div>
</div>
You can try to limit the size of your inner element. If you define size by a fixed px amount it will start scrolling as soon as the screen becomes smaller than that px amount. If you are ok with changing the height of the inner element you could use vh or you can implement #media queries to decrease the size on smaller screens. Here#s an example:
.inner { height: 100vh; /* 100 view height percentage*/}
Note: The viewport-percentage lengths are relative to the size of the initial containing block and affected by the presence of scrollbars on the viewport.
make section fullscreen of current screen
I have five section:
<section id="one">Page 1</section>
<section id="two">Page 2</section>
<section id="three">Page 3</section>
<section id="four">Page 4</section>
<section id="five">Page 5</section>
And I want to make each of them fullscreen of current screen (i have screen 1920/1080 other has 1024/768 etc)
I have css code like this:
section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}
when I'm chanching height from 2000px to 100% result is that:
any idea how can i solve this problem?
JSFIDDLE
EDIT
I've found nice article about that. see here if anyone will need it
You need to implicitly set the dimensions of the document (body) to those of the viewport (html), then give a height and width of 100% to each section- which is then calculated relative to this.
Change your CSS for body and section to:
Demo Fiddle
html, body {
margin: 0;
height:100%;
width:100%;
padding:0;
}
section {
display: block;
background: #CFF;
height:100%;
width:100%;
padding: 60px;
padding-left: 120px;
box-sizing:border-box;
}
By adding box-sizing:border-box; to the CSS for section, each section will maintain 100% width inclusive of the applied padding.
Note
You can also viewport percentage units, namely use vh and vw (viewport height) and (viewport width) units to cause content to stretch to fill a proportionate amount of the viewport, where 100 = 100%. This is likely the preferred solution vs implicit % units, depending on your required browser support and does not require the element to be nested within a parent with explicit height/width settings
Just use:
section {
height:100vh;
width: 100vw;
}
No need to set height and width properties for <body> and <html> tags.
Set the height on the body and html elements to 100%, then use height:100% on the sections.
html, body {
height:100%;
}
jsFiddle example
You need to set the document's height to the size of the browser viewport before you can give it's children a height in percents:
body, html {
margin: 0;
height:100%
}
Then, just give the sections a height of 100%:
section {
display: block;
background: #CFF;
height:100%;
padding: 60px;
padding-left: 120px;
}
JSFiddle Demo
That isn't too hard to do.
What you need to do is give the body and the html a height as well. I changed the following CSS:
html {
height: 100%;
position: relative;
}
body {
margin: 0;
height: 100%;
position: relative;
}
section {
display: block;
background: #CFF;
height:100%;
padding: 60px;
padding-left: 120px;
}
You can see how it works in the following jsfiddle
Create three divs such that the top and bottom ones have fixed height, and the middle one has dynamic height?
I want to create three, stacked divs. The top and the bottom ones will be of fixed height, whereas the one in the middle will have a dynamic height that expands to fill the remaining space: I've tried numerous things, such as setting the height to auto. I do have a solution, but it involves JavaScript (i.e., calculating the remaining height) but I was wondering if there was a pure CSS solution.
There's a CSS solution, but it won't work in older browsers. You need to use the calc "function" that is new to CSS, combined with height: 100%. If you've never used height: 100% before, you know that every parent element of the one you want to be 100% tall must also be set to height:100%. calc can take a percentage value and subtract pixels from it, so you just need to set it to be 100% minus however tall the top and bottom divs are.
Supported by: IE9+, Firefox 4+, Chrome 19+, Safari 6+
http://caniuse.com/calc
HTML
<div id='top'></div>
<div id='mid'></div>
<div id='bot'></div>
CSS
html, body
{
height: 100%;
}
#top, #bot
{
height: 50px;
background: red;
}
#mid
{
height: calc(100% - 100px);
}
FIDDLE: http://jsfiddle.net/jakelauer/9cYUB/
One solution is to do it with position absolute.
The downside of this approach is that if the total height of surrounding is smaller then the sum of the fixed heights the container will not be visible anymore.
Another thing to be noted is that this is probably a bad solution if you want to target mobile devices. It always depends on the exact situation if this solution is suitable.
If i remember right you will only have problems with IE 6 (on desktop) which does not support the top bottom combination for the position absolute.
HTML
<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>
CSS
.header, .container, .footer{
position: absolute;
outline: 1px solid black;
}
.header {
left: 0px;
top: 0px;
right : 0px;
height: 50px;
}
.container {
left: 0px;
top: 50px;
right : 0px;
bottom: 50px;
}
.footer {
left: 0px;
bottom: 0px;
right : 0px;
height: 50px;
}
JSFiddle
You can do it with a HTML table if you need older browser support, or if you need to support IE8+ or higher you could use the CSS table layout.
Here's a jsFiddle using CSS table layout.
HTML
<div>
<div>
<div>Fixed Height</div>
</div>
<div>
<div>
<div>Variable Height</div>
</div>
</div>
<div>
<div>Fixed Height</div>
</div>
</div>
CSS
html, body {
height:100%;
width: 100%;
margin: 0px;
padding: 0px;
text-align: center;
font-size: 20pt;
font-family: Verdana;
}
body > div {
display:table;
width: 100%;
height:100%;
}
body > div > div {
display: table-row;
}
body > div > div > div {
display: table-cell;
vertical-align: middle;
}
body > div > div:nth-child(odd) {
background: grey;
color: #FFF;
height: 100px;
}
body > div > div:nth-child(even) {
height:100%;
width:100%;
}
body > div > div:nth-child(even) >div {
height:100%;
width:100%;
overflow:hidden;
}
If i understand you request you need to use wrap div: http://www.cssstickyfooter.com/using-sticky-footer-code.html
Div width 100% minus fixed amount of pixels
How can I achieve the following structure without using tables or JavaScript? The white borders represent edges of divs and aren't relevant to the question. The size of the area in the middle is going to vary, but it will have exact pixel values and the whole structure should scale according to those values. To simplify it, I'd need a way to set "100% - n px" width to the top-middle and bottom-middle divs. I'd appreciate a clean cross-browser solution, but in case it's not possible, CSS hacks will do. Here's a bonus. Another structure I've been struggling with and end up using tables or JavaScript. It's slightly different, but introduces new problems. I've been mainly using it in jQuery-based windowing system, but I'd like to keep the layout out of the script and only control the size of one element (the middle one).
New way I've just stumbled upon: css calc():
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}
Source: css width 100% minus 100px
You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a div element is auto, which means that it uses the available width. You can then add padding to the element and it still keeps within the available width.
Here is an example that you can use for putting images as left and right rounded corners, and a center image that repeats between them.
The HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
The CSS:
.Header {
background: url(left.gif) no-repeat;
padding-left: 30px;
}
.Header div {
background: url(right.gif) top right no-repeat;
padding-right: 30px;
}
.Header div div {
background: url(center.gif) repeat-x;
padding: 0;
height: 30px;
}
While Guffa's answer works in many situations, in some cases you may not want the left and/or right pieces of padding to be the parent of the center div. In these cases, you can use a block formatting context on the center and float the padding divs left and right. Here's the code
The HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
The CSS:
.container {
width: 100px;
height: 20px;
}
.left, .right {
width: 20px;
height: 100%;
float: left;
background: black;
}
.right {
float: right;
}
.center {
overflow: auto;
height: 100%;
background: blue;
}
I feel that this element hierarchy is more natural when compared to nested nested divs, and better represents what's on the page. Because of this, borders, padding, and margin can be applied normally to all elements (ie: this 'naturality' goes beyond style and has ramifications).
Note that this only works on divs and other elements that share its 'fill 100% of the width by default' property. Inputs, tables, and possibly others will require you to wrap them in a container div and add a little more css to restore this quality. If you're unlucky enough to be in that situation, contact me and I'll dig up the css.
jsfiddle here: jsfiddle.net/RgdeQ
Enjoy!
You can make use of Flexbox layout. You need to set flex: 1 on the element that needs to have dynamic width or height for flex-direction: row and column respectively.
Dynamic width:
HTML
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-width {
width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}
Output:
.container {
display: flex;
width: 100%;
color: #fff;
font-family: Roboto;
}
.fixed-width {
background: #9BCB3C;
width: 200px; /* Fixed width */
text-align: center;
}
.flexible-width {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
}
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
Dynamic height:
HTML
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-height {
height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}
Output:
.container {
display: flex;
flex-direction: column;
height: 100vh;
color: #fff;
font-family: Roboto;
}
.fixed-height {
background: #9BCB3C;
height: 50px; /* Fixed height or flex-basis: 100px */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.flexible-height {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
The usual way to do it is as outlined by Guffa, nested elements. It's a bit sad having to add extra markup to get the hooks you need for this, but in practice a wrapper div here or there isn't going to hurt anyone. If you must do it without extra elements (eg. when you don't have control of the page markup), you can use box-sizing, which has pretty decent but not complete or simple browser support. Likely more fun than having to rely on scripting though.
Maybe I'm being dumb, but isn't table the obvious solution here?
<div class="parent">
<div class="fixed">
<div class="stretchToFit">
</div>
.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}
Another way that I've figured out in chrome is even simpler, but man is it a hack!
.fixed{
float: left
}
.stretchToFit{
display: table-cell;
width: 1%;
}
This alone should fill the rest of the line horizontally, as table-cells do. However, you get some strange issues with it going over 100% of its parent, setting the width to a percent value fixes it though.
We can achieve this using flex-box very easily.
If we have three elements like Header, MiddleContainer and Footer. And we want to give some fixed height to Header and Footer. then we can write like this:
For React/RN(defaults are 'display' as flex and 'flexDirection' as column), in web css we'll have to specify the body container or container containing these as display: 'flex', flex-direction: 'column' like below:
container-containing-these-elements: {
display: flex,
flex-direction: column
}
header: {
height: 40,
},
middle-container: {
flex: 1, // this will take the rest of the space available.
},
footer: {
height: 100,
}
what if your wrapping div was 100% and you used padding for a pixel amount, then if the padding # needs to be dynamic, you can easily use jQuery to modify your padding amount when your events fire.
I had a similar issue where I wanted a banner across the top of the screen that had one image on the left and a repeating image on the right to the edge of the screen. I ended up resolving it like so:
CSS:
.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}
.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}
The key was the right tag. I'm basically specifying that I want it to repeat from 131px in from the left to 0px from the right.
In some contexts, you can leverage margin settings to effectively specify "100% width minus N pixels". See the accepted answer to this question.