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

高度：100％只有在.outer类上设置px高度才会生效，但是，我的情况是不应该修复高度。

如果不在其父级中指定固定高度，我如何使用100％高度？

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

Answer 1

这可以做到，但这很棘手。你需要让html和身体知道他们的高度，然后才能告诉他们里面的东西是100高等等.--所以，如果html没有高度，那么身体怎么会知道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

我希望有所帮助！

Answer 2

如果你告诉标签的父标签（包括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;
}

Answer 3

使用jquery

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

如何制作CSS高度：100％在不同高度的容器中生效？

3 个答案: