浮动div的高度不会更改为100％

Question

我希望浮动div具有其父级的完整高度。

链接到我创建的JSFiddle： http : //jsfiddle.net/Em6ms/2/

div.second {
    float: left;
    width: 150px;
    height: 100%;
    /* <- Problem: This does not work! */ }

这就是我想要的样子： http : //www.directupload.net/file/d/3646/yqfogsew_png.htm

我知道关于此问题有很多问题，但没有一个答案可以解决我的具体情况。 我试过了

html, body {height: 100%;}

并使用“ clear：both”指令添加一个额外的div。

谢谢！

Answer 1

如果未指定父级div的高度，则不能将子级的高度设置为相对于其父级的高度100％。 如果未指定parent的大小，则解决此问题的一种方法是使用jquery：

$('document').ready(function(){
    $(".second").css('height', $(".first").css('height'));
});

现场演示

使用纯JavaScript：

var firstHeight = document.getElementsByClassName('first')[0].clientHeight-20;

var test = document.getElementsByClassName('second')[0].style.height = firstHeight+"px";

现场演示

Answer 2

现场演示

您必须为您的下一个元素设置height （例如： body ），然后使用height:100% ！

CSS：

body{
    height:500px;

}
div.first {
    position:relative;
    height:200px;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    box-shadow: 1px 1px 2px 2px;
    padding: 1%;
}
div.second {
    position:absolute;
    background:green;
    width: 18%;
    height:98%;
    top:1%;
    left:1%;
    border-right-color: red;
    border-right-style: solid;
    border-right-width: 5px;
}
div.third {
    position:absolute;
    width:78%;
    height:98%;
    top:1%;
    right:1%;
    text-align: center;
    background:#e7e7e7;
}

Answer 3

height: 100%; 表示元素变得与其父元素一样高。 因此，您还必须将所有父元素的高度都设置为100％。

您的父元素不仅是body, html而且是.first 。

所以只需添加

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

而且有效！

但是，还有另一个问题：您不能将元素的高度设置为100％，也不能添加一些padding ， margin或border 。 他们需要空间，因此元素会变得大于100％。