Why doesn't height: 100% work to expand divs to the screen height?
In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>
, which can be a percentage height. .
So, you've given all of your elements height, except for the <html>
, so what you should do is add this:
html {
height: 100%;
}
And your code should work fine.
* { padding: 0; margin: 0; }html, body, #fullheight { min-height: 100% !important; height: 100%;}#fullheight { width: 250px; background: blue;}
<div id=fullheight> Lorem Ipsum </div>
Setting divs to 100% height when height: 100% doesn't work
What i see about your coding is :
1 - container should have position relative if you want to have the first div with the red border with full height that can be overlapping the container you have to make the first div position absolute and i provided here jsfiddle with an exmaple of your case the the img inside the div should take height 100%; and width 100%;
from the parent and you can use object-fit: cover;
to have it same height and width respecting the ratio of your container
https://jsfiddle.net/Letwug7t/
#container { background-color: transparent; border-radius: 0px 0px 0px 0px; font-size: 0.8em; font-family: Courier; padding: 0px;/* overflow: hidden; */ margin: 40px 0px; height: 100%; width: 100%; border: solid 4px green; position: relative;}#container > div:first-child { display: block; border: solid 2px red; height: 100%; width: 100%; position: absolute;}#container > div:first-child > div { display: block; height: 100%;}#container > div:first-child > div > img { position: absolute; z-index: 1; margin: 0px; height: 100%; width: 100%; object-fit: cover;}#container p { margin: 20px 40px 20px 40px;position: relative;z-index: 2;}
<div id="container"> <div> <div> <img src="http://placehold.it/300x300"/> </div> </div> <div> <div> <p>Correctly displaying text here.</p> </div> </div> <div> <div> <p>More correctly displaying text here.</p> </div> </div></div>
CSS div height 100% not working
You could set the height of parent div1
to 1000px
and set the children's height to :inherit
.
Here's an example:
#div1{ width:1024px; height:1000px; background:red; overflow:hidden;}#div2{ float:left; width:100%; height:inherit; background:yellow;}#div3{ float:left; width:460px; height:inherit; background-image:url('http://www.ricoh-imaging.co.jp/english/r_dc/caplio/r7/img/sample_04.jpg'); background-size:100% 100%; background-position:bottom; background-repeat:no-repeat;}
#div4{ float:left; width:270px; height:inherit; background:violet;}
#div5{ float:left; width:25px; height:inherit; background:black;}
#div6{ float:left; width:269px; height:inherit; background:blue;}
<div id="div1" class="center"> <div id="div2"> <div id="div3"></div> <div id="div4"></div> <div id="div5" ></div> <div id="div6"></div> </div></div>
min-height: 100% doesn't seem to work, div does not take full height
You need to set parent elements height to 100%
as well. In your case, set body
's height to 100%
.
html { height: 100%;}
body { padding: 1.25em; background-color: #292c37; border: 1px solid red; height: 100%;}
.main-app { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; border: 1px solid green;}
header { background-color: wheat;}
main { background-color: firebrick;}
footer { background-color: skyblue;}
header,main,footer { padding: 1.25em;}
<div class="main-app"> <header>Header</header> <main>Main</main> <footer>Footer</footer></div>
Why does height: 100% make the height smaller in this example?
The parent div container
doesn't have a fixed height. Therefore, the height is based on the content, it takes 100% of the inner content (= height: auto
). I added a fixed height to the codepen and you can see that, now, the div takes 100% of the container height.
Codepen example
Why height=100% doesn't work?
In general, for an element using percent on height
to pick up its parent's height, the parent need a height other than auto
or being positioned absolute, or the height
will be computed as auto
.
Based on those 2 options, and as you mentioned in a comment, your own header is dynamic in height, you are left with absolute positioning.
The problem with adding absolute to the content
, it will be taken out of flow and stop behaving as a normal flowed flex item, the good news, one can add a wrapper set to absolute.
Stack snippet
.container { display: flex; flex-direction: column; width: 200px; height: 100px;}
.header { display: flex; background-color: rgba(255, 0, 0, 0.5);}
.content { position: relative; /* added */ flex-grow: 1; background-color: rgba(0, 255, 0, 0.5);}
.wrapper { position: absolute; /* added */ left: 0; /* added */ top: 0; /* added */ right: 0; /* added */ bottom: 0; /* added */}
.third-party-component { height: 100%; width: 100%; background-color: rgba(0, 0, 255, 0.5);}
<div class="container"> <div class="header">Header</div> <div class="content"> <div class="wrapper"> <div class="third-party-component"> Third party component </div> </div> </div></div>
Related Topics
Angular 4 Img Src Is Not Found
Print Header/Footer on All Pages (Print Mode)
On Hover of Child, Change Background Color of Parent Container (Css Only)
Angular Material Table - Apply Dynamically Background Color to a Row (Angular 2+)
Fixed Header Table With Horizontal Scrollbar and Vertical Scrollbar On
How to Display Multiple Lines of Text in Svg
How to Remove the White-Space Created by an Image
How to Limit the Maximum Files Chosen When Using Multiple File Input
Placing Two Divs on Top of Each Other Without Using Position:Absolute
How to Embed an External Webpage Without Using Iframe
Force Element to Display Outside of Overflow:Hidden
How to Resize Image in Bootstrap Carousel
How to Create a Simple Like Button
Call Method from HTML Only One Time in Angular2
How to Remove All Script Tags from HTML File
How to Run a HTML File from Terminal
Css Overflow-X: Visible; and Overflow-Y: Hidden; Causing Scrollbar Issue