Height 100% on child floated elements of parent with definite height

Question

I need to fix the following code so that child elements were 100% height of its parent. Chromium and Firefox debugging tools show that parent element (footer) has non-zero height. So children should have the same height.

HTML

<div class="footer">
  <footer class="clearfix">
    <section class="path">
      <img height="474px" src="../../src/images/api-maps.yandex.ru.png">
    </section>
    <section class="info">
      <p>bla</p>
    </section>
    <section class="links">
      <p>bla</p>
    </section>
    <footer class="clearfix"></footer>
  </footer>
</div>

CSS

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
    }

    .clearfix {
      margin: 0;
      padding: 0;
    }
    .clearfix:before, .clearfix:after {
      content: " ";
      display: table;
    }
    .clearfix:after {
      clear: both;
    }

    div.footer {
      width: 100%;
    }
    div.footer footer {
      background-color: black;
      width: 100%;
      overflow: hidden;
    }
    footer.clearfix {
      border-top: 6px solid grey;
    }
    footer section {
      float: left;
      width: 33.333%;
      height: 100%;
    }

    section.path {
      background-color: red;
    }
    section.path img {
      width: 100%;
      display: block;
    }
    section.info {
      background-color: blue;
    }
    section.links {
      background-color: yellow;
    }

I can't figure out why it doesn't work.

The footer has no height of its own, just what is **implied** by the image in the content so `height:100%` won't work. — Paulie_D, Sep 15 '15 at 09:31
Yes, the height on the container would have to be explicit. A better approach is to use `display: flex`, or `display: table`, which is better supported. That is, `display: table` on the container and `display: table-cell` on the sections within. (PS—you also need to remove the float on the sections for that to work.) — ralph.m, Sep 15 '15 at 09:34
As long as you specify height on parent elements, `height: 100%` will work.. `display: table` and `display: flex` are solid alternatives, but if you don't want to alter the HTML, and you want to use percentage heights, simply declare a height on each parent, all the way up to the root element. More details in my answer below. — Michael Benjamin, Sep 15 '15 at 10:01

score 1 · Answer 1 · edited May 23 '17 at 12:14

Since you are using percentage heights, you need to specify the height of parent elements.

Try this:

html, body { height: 100%; }
.footer { height: 100%; }
footer { height: 100%; }

DEMO: http://jsfiddle.net/1krrxb87/

For a clear understanding of how the height property works with percentage values, see my answers here:

score 1 · Accepted Answer · answered Sep 15 '15 at 09:42

The footer has no height of its own, just what is implied by the image in the content so height:100% won't work.

As mentioned in the comments by raplh.m

the height on the container would have to be explicit. A better approach is to use flexbox, or display: table, which is better supported. That is, display: table on the container and display: table-cell on the sections within.

In fact you can use both and if the browser supports flexbox it will use that in preference to display:table.

As a bonus...you don't need to clear any floats because there aren't any.

footer {
  display: table;
  table-layout: fixed;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
section {
  display: table-cell;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}
img {
  display: block;
  margin: auto;
}
.path {
  background: red;
}
.info {
  background: yellow;
}
.links {
  background: blue;
}

<footer>
  <section class="path">
    <img height="474px" src="http://lorempixel.com/output/city-h-c-200-474-10.jpg">
  </section>
  <section class="info">
    <p>bla</p>
  </section>
  <section class="links">
    <p>bla</p>
  </section>
</footer>

Codepen Demo

score 1 · Answer 3 · answered Sep 15 '15 at 11:08

This is also possible without use off flexbox or display:table

When you need footer to be atleast have an cross browser height off 100% off the parent you need these CSS rules

footer {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

To have three floated sections that will have 100% height and appear equal height you can use this HTML and CSS code.

HTML

<footer>
    <section>        
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo. 
        </p>    
    </section>
    <section>        
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo. 
        </p>    
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo. 
        </p>          
    </section>
    <section>        
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo. 
        </p>    
    </section>
    <div style="clear:both;"></div>
</footer>

CSS

html, body {
    height: 100%;
    background-color: green;   
}

footer {
    background-color: yellow;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    overflow: hidden;
}

footer section {
    float: left;
    width: 33.33%;
    background-color: red;

    padding-bottom: 999999em;
    margin-bottom: -999999em;
}

see demo http://jsfiddle.net/gfoff12w/3/

Note the CSS rules padding-bottom: 999999em and margin-bottom: -999999em these CSS rules will force the browser to create an "height" on the floated section elements.

Height 100% on child floated elements of parent with definite height

3 Answers3