Why Doesn't Height: 100% Work to Expand Divs to the Screen Height

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



Leave a reply



Submit