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>
Related
This question already has answers here:
Fixed position relative to parent element [duplicate]
(4 answers)
Closed 4 years ago.
Run the snippet below to see what I'm trying to achieve.
The main question is: Is that possible to achieve this without JavaScript?
.container {
display: flex;
width: 400px;
height: 2000px;
background-color: #aaa;
}
.left {
width: 150px;
background-color: lightgreen;
}
.right {
width: 100%;
background-color: lightcoral;
}
.fixed {
position: fixed;
height: 100px;
width: 100%;
background-color: skyblue;
}
<div class="container">
<div class="left">
My width can change anytime.
</div>
<div class="right">
<div class="fixed">
I'm fixed. Scroll the page to verify.<br /> I want to be the same width as my red parent.<br /> Any tips?
</div>
</div>
</div>
You can actually calculate the width it needs to have, based on the widths of the flex items.
The left item is given a width of 150px and the right item 100% (which resolves to 400px). This totals 550px, and that gets squeezed into the 400px flex container, so the actually used width for the right item is 400px *(400/550).
(Of course this is in the absense of any distorting factors such as flex-grow, which would make the whole calculation a lot more complex!)
.container {
display: flex;
width: 400px;
height: 2000px;
background-color: #aaa;
}
.left {
width: 150px;
background-color: lightgreen;
}
.right {
width: 100%;
background-color: lightcoral;
position:relative;
}
.fixed {
position: fixed;
height: 100px;
background-color: skyblue;
width:calc(400px * (400 / (400 + 150)));
}
<div class="container">
<div class="left">
My width can change anytime.
</div>
<div class="right">
<div class="fixed">
I'm fixed. Scroll the page to verify.<br > I want to be the same width as my red parent.<br > Any tips?
</div>
</div>
</div>
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 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>
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.