我有页面结构为:
<div class="parent">
<div class="child-left floatLeft">
</div>
<div class="child-right floatLeft">
</div>
</div>
现在,左子DIV将有更多的内容,因此父DIV的高度会随着子DIV的增加而增加。
但问题是适合儿童的身高并没有增加。如何让它的高度等于它的父结点?
我有页面结构为:
<div class="parent">
<div class="child-left floatLeft">
</div>
<div class="child-right floatLeft">
</div>
</div>
现在,左子DIV将有更多的内容,因此父DIV的高度会随着子DIV的增加而增加。
但问题是适合儿童的身高并没有增加。如何让它的高度等于它的父结点?
当前回答
如果你了解bootstrap,你可以通过使用'flex'属性轻松完成。你所需要做的就是将下面的css属性传递给父div
.homepageSection {
overflow: hidden;
height: auto;
display: flex;
flex-flow: row;
}
其中。homepagesection是我的父div。 现在在你的html中添加子div
<div class="abc col-md-6">
<div class="abc col-md-6">
abc是我的子div,你可以检查两个子div的高度相等,而不考虑边界,只要给子div边界
其他回答
<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>
<div class="child-right floatLeft" style="height:100%">
</div>
</div>
我使用内联样式只是为了表达想法。
我可以看到公认的答案使用位置:绝对;而不是float: left。如果你想使用float:留给下面的结构,
<div class="parent">
<div class="child-left floatLeft"></div>
<div class="child-right floatLeft"></div>
</div>
给出位置:自动;赋给父节点,以包含子节点的高度。
.parent {
position: auto;
}
.floatLeft {
float: left
}
如果你了解bootstrap,你可以通过使用'flex'属性轻松完成。你所需要做的就是将下面的css属性传递给父div
.homepageSection {
overflow: hidden;
height: auto;
display: flex;
flex-flow: row;
}
其中。homepagesection是我的父div。 现在在你的html中添加子div
<div class="abc col-md-6">
<div class="abc col-md-6">
abc是我的子div,你可以检查两个子div的高度相等,而不考虑边界,只要给子div边界
父结点有身高吗?如果你像这样设置父结点高度。
div.parent { height: 300px };
然后你可以让孩子像这样伸展到全身高度。
div.child-right { height: 100% };
EDIT
下面是如何使用JavaScript实现的。
对于父元素,添加以下属性:
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
然后是。child-right这些:
.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
在这里可以找到更多关于CSS示例的详细结果,在这里可以找到关于等高列的更多信息。