如何在高度可变的容器中使CSS height: 100%生效？

Question

我的HTML中有一个外部div，里面有2个div：

<div class="outer">
    <div class="col-left">
        <p>Lorem Ipsum is simply dummy text of the...
    </div>

    <div class="col-right">Right</div>

    <div class="clear"></div>
</div>

CSS是：

.outer {
    border: 1px solid black;
}

.col-left {
    float: left;
    background: cyan;
    width: 80%
    height: 100%;
}

.col-right {
    float: left;
    width: 15%;
    background: yellow;
    height: 100%;
}

.clear {
    clear: both;
}

只有在我在 .outer 类中设置了 px 高度时，height: 100% 才会生效，但是我遇到了一个高度不应固定的情况。

如何在不指定父级固定高度的情况下使用 height 100%？

---

我将使用 Layne 在评论中写的内容。

- SBel

---

你不能这样做。这种行为是规范的一部分。对于可变高度，必须使用JavaScript。 - Jeff

雅，Jeff是对的，我过去也卡在这个问题上了很久。 - matthiasgh

你会用jQuery吗？我之前创建了一个函数来做这件事。 - Iron3eagle

我不知道这是否是你想要的，但可以试一下：http://jsfiddle.net/cMEKx/ - user238801

@Layne 喜欢那个 CSS 技巧，但是之前我做的事情用不上。不过它是一个很好的工具。 - Iron3eagle

Answer 1

这是可以做到的，但有些棘手。您需要让html和body知道它们的高度，然后才能告诉它们内部的东西要成为100%的高度等等。 --- 因此，如果html没有高度，那么body将不知道要成为什么的100％？以此类推。这是我每隔一天就会遇到的一个棘手问题。

html, body {
    height: 100%;
}

.outer {
    border: 1px solid black;

    /* I use this instead of the micro clear-fix in this case - look that up */
    overflow: hidden;
    height: 100%;
}

.col-left {
    float: left;
    background: cyan;
    width: 80%;
    min-height: 100%;
}

.col-right {
    float: left;
    width: 20%;
    background: yellow;
    height: 100%;
}

http://jsfiddle.net/sheriffderek/fdxGZ/

这也是“粘性”页脚等问题： 总是一场战斗http://codepen.io/sheriffderek/pen/ziGbE 希望这有所帮助！

- sheriffderek

---

看这个清除浮动的 clear-fix。然后你只需要在一些关键容器上添加一个类，而不必留下空的 clear divs。http://nicolasgallagher.com/micro-clearfix-hack/（截至2013年7月的当前解决方案） - sheriffderek

@matthiasgh 这是一个大胆的声明。 - Mr_Chimp

Answer 2

使用jQuery。

$(document).ready(function(){
    var outerheight = $('.outer').height();
    $('.col-right').height(outerheight);    
});

- robz228

Answer 3

如果您告诉标签的父标签（包括html和body标签）也是100％高度，那么这应该可以解决您的问题。我添加了max-height作为一个选项，因为我不知道您是否希望容器运行整个屏幕的长度。

http://jsfiddle.net/brandonbabb/SL3FC/

html, body {
    height:100%
}
.outer {
    border: 1px solid black;
    height: 100%;
    max-height: 500px
}
.col-left {
    float: left;
    background: cyan;
    width: 80%;
    height: 100%;
}
.col-right {
    float: left;
    width: 15%;
    background: yellow;
    height: 100%;
}
.clear {
    clear: both;
}

- Brandon Babb