CSS Height 100% Issue

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>

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>

Div height: 100% not working with body min-height: 100vh

The answer is simple as percentage min-height is calculated based on parent container's height value not min-height.

* {margin:0;}

body {
  background: gray;
  height: 100vh; /* look here */
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: 100%;  /* look here */
}

<div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

CSS height: 100% not working in html or body

Thanks everyone for your answers, without them I would not have been able to come up with my solution:

I remembered reading you can mix values in calc(), so I changed the flexbox class to:

.flex-box {
    display: flex;
    height: -moz-calc(100vh - 105px);
    height: -webkit-calc(100vh - 105px);
    height: calc(100vh - 105px);
}

That still gave me some padding at the bottom, so I removed the height: 100%; from the html and body tags, and it works perfectly.

Working fiddle: https://jsfiddle.net/n2nkmgvs/

CSS: 100% Height Issues

An element positioned absolute doesn't affect the wrapping elements in any way. So the height of your div#static-maincontent doesn't really translate to div#static-content... it just floats above all other elements.

Remove all position:absolute
give div#sidebar a float:left
give div#static-maincontent a float:right
add something like <div style="clear:both;"> after div#static-maincontent and INSIDE div#static-content
remove height: 100% from div#static-content

This should work (at least with firebug).

CSS position absolute and height 100% issue on Chrome

Looks like Chrome doesn't apply the height:100% when position:absolute and display:table is also being set at the same time, and of course there is also position:relative set on the wrapper.

I would suggest to use flexbox for the caption for easy centering, and use the HTML5 semantic <figure> + <figcaption> elements for the markup.

.caption {
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}

Follow this post to find more ways of centering for both horizontally and vertically.

Snippet

.figure {  position: relative;  display: inline-block;  /*NEW*/  margin: 0;              /*NEW*/}
.image {  border-radius: 4px;  width: 100%;  height: auto;  display: block;}
.caption {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.6);  color: white;  box-sizing: border-box;  border-radius: 4px;  opacity: 0;  transition: 0.2s;  display: flex;            /*NEW*/  justify-content: center;  /*NEW*/  align-items: center;      /*NEW*/}
a:hover .caption {  opacity: 1;}

<a class="item" href="#">  <figure class="figure">    <img class="image" src="//i.stack.imgur.com/tiQ1S.jpg">    <figcaption class="caption">      caption of the image    </figcaption>  </figure></a>

height 100% not working in CSS

Right.

The way this is working is, you have a parent element with no height. So any child that goes in the parent cannot have a percentage height because:

20% of nothing = nothing
100% of nothing = nothing

If the child has content it will default to the size that the content is.

If you have the parent a height in px:

20% of 100px = 20px
100% of 100px = 100px

So thats how that works.

Solution to your code, as its the right column that is bigger we could use display: table; this will allow us to get the cells to be equal height (whatever the bigger height is).

Change CSS:

#columns {
    display: table;
    border: 1px solid yellow;
    overflow: hidden;
    margin: 0;
    height: 800px;
}
#left_column {
    width: 65%;
    height: 100%;
    display: table-cell;
    font-size: 80%;
    color: #414342;
    background-color: white;
    border-bottom: 1px solid red;
    text-align: justify;
    overflow: hidden;
}
#right_column {
    display: table-cell;
    width: 35%;
    font-size: 80%;
    background-color: #424D47;
    color: #8BC7D3;
}

DEMO

Any question feel free to ask.

Chrome vs. IE/FF CSS height 100% Issue

Solution
Someone posted me the jsfiddle which I tried to understand before. I need to change:

#content {
    background-color: #FFFFFF;
    float: left;
    width: calc(100% - 170px);
}
#wrapper {
    float: left;
    height: 100%;
    width: 100%;
    display: inline-block;
}
#wrapper_nav {
    background-color: #C0C0C0;
    float: left;
    height: 100%;
    min-height: 450px;
    width: 170px;
}

into

#content {
    background-color: #FFFFFF;
    display: table-cell;
    vertical-align: top;
}
#wrapper {
    float: left;
    height: 100%;
    width: 100%;
    display: table;
}
#wrapper_nav {
    background-color: #C0C0C0;
    display: table-cell;
    vertical-align: top;
    width: 170px;
}

CSS - height 100% of parent not working

the #game-content or its parent(body) must have a fixed height, if try setting a fixed height in #game-content the #game-wrapper will have its 100% height.

Try out:

#game-content
{
    margin-top:50px;
    overflow:auto;
    height:1000px;
    width:100%;
}

#game-wrapper
{
    float:left;
    margin-left:90px;
    position:relative;
    height:100%;
}

body, html { /* both to be sized */
   height: 1000px; /* or 100% */
}