孩子的高度100％浮动有一定高度的父母的元素

时间：2015-09-15 09:23:28

标签： html css

我需要修复以下code，以便子元素的父级高度为100％。 Chromium和Firefox调试工具显示父元素（ footer ）的高度非零。所以孩子应该有相同的身高。

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;
    }

我无法弄清楚它为什么不起作用。

3 个答案:

答案 0 :(得分：1)

由于您使用的是百分比高度，因此您需要指定父元素的高度。

试试这个：

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

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

要清楚了解height属性如何使用百分比值，请在此处查看我的答案：

答案 1 :(得分：1)

页脚没有自己的高度，内容中的图像只有暗示，因此高度：100％将无效。

正如raplh.m的评论所述

  

容器上的高度必须是明确的。更好的方法是使用flexbox或display：table，这是更好的支持。也就是说，显示：容器上的表格和显示：表格内的部分。

事实上，您可以使用两者，如果浏览器支持flexbox，则会优先使用display:table。

作为奖励......你不需要清除任何花车，因为没有。

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

答案 2 :(得分：1)

这也可以在不使用flexbox或display:table

的情况下使用

当你需要页脚至少有一个跨浏览器高度关闭父亲100％，你需要这些CSS规则

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

要有三个浮动部分，其高度为100％且高度相等，您可以使用此HTML和CSS代码。

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;
}

参见演示http://jsfiddle.net/gfoff12w/3/

请注意CSS规则padding-bottom: 999999em和margin-bottom: -999999em这些CSS规则将强制浏览器在浮动节元素上创建“高度”。

相关问题
最新问题