html - 如何使CSS高度为: 100% take effect in a varying height container?

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

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

如何在不在其父项中指定固定高度的情况下使用 100% 高度？

---

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

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

希望对您有所帮助!