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

Live demo

使用纯javascript：

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

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

<强> Live demo

Answer 2

Live Demo

您必须为父元素设置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％。

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

3 个答案: