3

我的 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% 才会生效，但是，我遇到了不应该固定高度的情况。

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

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

4

3 回答 3

3

这可以做到，但很棘手。您需要让 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

我希望这会有所帮助！

于 2013-07-23T15:57:55.310 回答
1

如果您告诉标签的父标签（包括 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;
}
于 2013-07-23T15:53:59.953 回答
1

使用 jQuery

$(document).ready(function(){
    var outerheight = $('.outer').height();
    $('.col-right').height(outerheight);    
});
于 2013-07-23T16:03:25.710 回答