CODEWITHSUNDEEP
htmlcss
trupanka
trupanka

Reputation: 703

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

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.

Upvotes: 1

Views: 56

Answers (3)

Raymond Nijland
Raymond Nijland

Reputation: 11602

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.

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371143

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:

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 114991

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

Upvotes: 1

Related Questions