I am trying to make a div expand to its max-height in px by using height 100%. It does not seem to want to work..
html
<div class="container">
<h2>Dynamically populated using PHP</h2>
<p>Dynamically populated using PHP</p>
</div>
css
.container {max-height:500px; height:100%;}
max-height will cap the DIV's height at 500px but allow it to be smaller if it does not take up 500px.
height: 100% will inherit the height from the parent element's height.
Use height: 500px if you want the DIV to be 500px in height.
I have included an example. For both the .outer and .inner DIVs un-comment or comment out the height values. You will see that if the height of the parent DIV is not set, then height: 100% will not match the height of the parent and will default to it's own content's height.
.outer {
background-color: blue;
height: 100px;
}
.inner {
background-color: red;
color: white;
/*height: 100%;*/
text-align: center;
width: 50%;
}
<div class="outer">
<div class="inner">
Inner
</div>
</div>
The height of an element will not obey the percentage height unless its parent has a defined height. The only exception to this rule is the <html> tag and the <body> tag. They CAN have percentage heights. You could use this exception to get your desired output.
I did it in this JSFiddle.
Hope this helps!
I found the real solution for this question. I say the real solution because specifying the px max height is not practical today.
Here the solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body, html {
height: 100%;
overflow: hidden;
}
.general {
display: flex;
height: 99%;
max-height: 99%;
}
.panel {
border: 1px dashed;
width: 30%;
height: 99%;
}
.main {
border: 1px dotted;
width: 100%;
max-width: 89%;
height: 99%;
}
</style>
</head>
<body>
<script>
</script>
<div class="general">
<div class="panel">
Panel: Left
</div>
<div class="main">
Main: Right
</div>
</div>
<script>
</script>
</body>
</html>
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I want to make the background-color for a DIV not body light gray and another div inside it dark gray. I tried the following:
- Setting the first div width and height to 100%
- Setting the first div min-width and min-height to 100%
- Setting the first div max-width and max-height to 100%
- Setting html and the first div width and height to 100
.div1 {
min-height: 100%;
min-width: 100%;
background-color: lightblue;
}
.div2 {
background: black;
}
<html>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
You need to set the html and body dimensions.
html,body {
height: 100%;
width: 100%;
}
updated code:
html,body {
height: 100%;
width: 100%;
}
.div1 {
min-height: 100%;
min-width: 100%;
background-color: lightblue;
}
.div2 {
background: black;
}
<html>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
This is a simple html page. I set html, body height 100%, but there is a quite long content.
Now I make the browser scale to a small size and scrollbar will show. I open Chrome Dev tool, the computed height of body seems the size of viewport, say 321px.
Normally, a body container of 321px computed height will end at the top of the page, but actually the body seems has the same height of the whole page, 1000px here.
That is my puzzle, why does the computed height not match the actual height?
html,body{
width:100%;
height:100%;
background: #ccc;
}
.content {
width: 20px;
height: 1000px;
background: #666;
}
<html>
<head></head>
<body>
<div class="content"> </div>
</body>
</html>
Here you are having an overflow, so the height of the body and the html are different from 1000px and equal to screen height because of the 100%.
The thing that make you think your body has 1000px is probably the background that cover your whole content but here you are facing a special behavior of the background called background propagation.
You may change the background of the html element and you will see the issue clearly:
html,
body {
height: 100%;
background: #ccc;
margin:0;
}
html {
background: red;
border:5px solid green;
}
.content {
width: 20px;
height: 1000px;
background: #666;
}
<div class="content"> </div>
As you may notice, the body height is not equal to the content height but limited to the screen height and your content is simply overflowing the body element. I also added a border to the html element to show that its height is also limited to screen size and to better highlight the background propagation behavior.
When you set height:100% to an element you basically telling it to take it's parent's height as it's own height.
Example :
* {
text-align: right;
}
#parent {
height: 100px;
background: red;
}
#kid {
height: 100%;
width: 200px;
background: lime;
}
#grandkid {
height: 1000px;
width: 100px;
background: orange;
}
<div id="parent">
<div id="kid">
<div id="grandkid">
</div>
</div>
</div>
If you expect the parent to take it's children's computed height, don't define a height for it.
Example :
#parent {
/* Parent without height takes all of it's children's heights*/
background: red;
}
.kids {
height: 1000px;
width: 40px;
background: lime;
margin-top: 10px;
}
<div id="parent">
<div class="kids"></div>
<div class="kids"></div>
</div>
This CSS rule not working..
#wrapper{
height:100%;
width:100%;
background-color: aliceblue;
}
The wrapper does not take the full height of the page..
Just try like below it will be work for your issue.
First, pick the div which was you want to make 100% height of your any device and then apply CSS like below.
.wrapper {
height: 100vh;
}
For make your section or div height same as well as your device height you have to use VH, It's called viewport height.
I am trying to create a div for which I set the height should be same as that of my page.
height:100%
means nothing by itself...it hs to be 100% of something..and those numbers have to be calculable all the way up the parent-child chain.
So what can the wrapper be 100% of? The answer is the <body> which itself is a child of the <html> element.
Once we set those, it all works as you can't go up the chain any further than the <html> element which is the height of the viewport.
html,
body {
height: 100%;
margin: 0;
}
#wrapper {
height: 100%;
background-color: blue;
}
<div id="wrapper"></div>
That said, I'd go with min-height:100% on the wrapper to allow for overflow issues if the content exceeds the vireport height.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
background-color: blue;
}
.expander {
height:1000px;
}
<div id="wrapper">
<div class="expander"></div>
</div>
<!DOCTYPE html>
<style>
img.normal {
height: auto;
}
img.big {
height: 500px;
}
p.ex {
height: 100px;
width: 100px;
}
</style>
<title></title>
</head>
<body>
<img class="normal" height="84" src="hari.jpg" width="95"><br>
<img class="big" height="84" src="hari.jpg" width="95">
<p class="ex">
sample
</p>
</body>
I have a simple code:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<style type="text/css">
html{
background-color: red;
height: 100%;
}
body {
background-color: black;
min-height: 50%;
padding: 10px;
}
.wrap{
width: 100%;
height: 50%;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
test
</div>
</body>
</html>
I expect to fit .wrap container to 50% of his parent container (body). But its doesnt work...
If i change height property to ex. height: 150px; and css working fine...
I don't understand why.
Thank you for your response!
This is just examle, not real layout. Idont understand why i cannot wrap .wrap container to 100% of body container (black color) with % unit. I think about responsive layout and i must to use % unit, not px or others.
Besides, it is little illogical situation :)
Try like this DEMO
CSS:
html {
background-color: red;
height: 100%;
}
body {
background-color: black;
height: 50%;
padding: 10px;
}
.wrap {
width: 100%;
min-height: 50%;
background-color: green;
}
Use min-height in the "px" that will work fine. you do not have the content in the div so you have to use min-height in pixels.
html{
background-color: red;
height: 100%;
}
body {
background-color: black;
min-height: 50%;
padding: 10px;
}
.wrap{
width: 100%;
min-height: 200px; /*-- similar like this --*/
background-color: green;
}
HTML :
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<style type="text/css">
html{
background-color: red;
height: 100%;
}
body {
background-color: black;
min-height: 50%;
padding: 10px;
height: 100%;
}
.wrap{
width: 100%;
height: 50%;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
test
</div>
</body>
</html>
Try this it will resolve your problem.
This happens because if u see there is no height of parent container so we have to give some height to it.
Change body style to
body {
height: 100%;
}
Do not embbed min-height & height with each other since each of them is calculated msed on other.
When you give height in percent to the container embedded in parent container with min-height, them a paradox arises.
1: for inner container (100%) of parent, height must have to calculate, but since parent have no specific height then it can not determin what to do.
2: Parent has min-height, but do determin its height, height of it's children should be konwn, which is not know in this case since it is 100% of parent which has ho height specified.
Due to above two case height of both parent & child become 0 (Undefined), which is happening in your case. To avoid this when giving percent height to any div ensure it's parent has a fixed height, otherwise whole calculation with get wrong.
I'm stuck with this problem:
I have a div (#container) which contains two divs. The height of the container should be exact 100%, regardless of the content of this div - not less not more.
Inside this div I want two full-width divs on top of each other:
The (#upper) div's content automatically determines its height.
The (#lower) div's content should be scrollable, but only vertically. Its height is dependent on the height of (#upper): 100% - (#upper)height = (#lower)height
Currently I have the following css ...
body {
margin:0;
padding:0;
}
#container
{
position: relative;
width: 500px;
height: 100%;
max-height: 100%;
background-color: #f00;
}
#upper {
width: 100%;
background-color: #0f0;
}
#lower {
width: 100%;
background-color: #00f;
overflow: auto;
}
... as well as this code:
<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>
How can the (#container)'s height be exactly 100% - independent of its content? Now the height becomes larger because of the combined content of (#upper) and (#lower)?
How can (#lower) be scrollable (only up and down, not left to right!)?
Thank you very much for your feedback, I hope we can all learn from this.
You should set your html and body elements to have a height of 100%, so your children divs know what to base the percentage off of. Like so:
html, body {
height:100%;
width:100%;
}
Change your container to this:
#container
{
width: 500px;
height: 100%;
background-color: #f00;
}
As for your scrolling issue, you're almost there. Change the code to the following:
#lower {
width: 100%;
height:100px;
background-color: #00f;
overflow-y: auto;
}
For it to work best, have a fixed height set on your lower div and that'll make it easy for the scrollable action to work best.
EDIT:
I realized I mis-read your question. You'd like to have your lower div fill the remaining height of the window. Here's how to do that in jquery:
var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top);
$('#lower').height(remaining_height);
I still haven't found a way to do that with only CSS... Sadly.
I think this may help you:
<head>
<title></title>
<style>
.upper{
height:50px;
border: 1px solid groove;
}
.lower{
height:calc(100% - 50px);
border: 1px solid blue;
}
</style>
</head>
<body>
<div style="height:500px; border:1px solid red; position:relative;">
<div class="upper"></div>
<div class="lower"></div>
</div>
</body>
This will take 50px out the lower div
For a pure CSS solution, use display: table-row.
<style>
*{
box-sizing: border-box;
margin:0;padding:0;
}
html, body, #container{
height: 100%;
}
#container{
display: table;
height: 100%;
}
#upper, #lower{
display: table-row;
}
#upper{
height: 100px;
}
</style>
<div id="container">
<div id="upper">bla</div>
<div id="lower">bla</div>
</div>
This solution only works if the height of the content is not more than 100%, see here: https://stackoverflow.com/a/13668087/603569
Here a 100% css alternative:
<div style="height:100%;">
main div
<div style="height:100%;padding-bottom:200px;">
header div
</div>
<div style="position:relative;height:200px;top:-200px;">
footer div
</div>
</div>
Remember that all parent elements, including body and html, must have their height set too.