phpstudy集成环境

 首页 > 让浮动元素高度等于父元素高度

让浮动元素高度等于父元素高度

如下图。H为黑色边框即父元素。A，B为子元素，均向左浮动。由于黑色边框设置了overflow:hidden(height属性不设置)，B撑大了父元素H，使得H有了高度且为B的高度。

那么问题来了，如何让A的高度等于父元素H的高度？

div a ,  div b {
    height: xx; //这里设置a、b两个div的高度相等就可以了
} 
    
.a{
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}
<style>
    .box{ position: relative; width: 160px; border: 1px solid #000;}
    .box .a{ width: 50px; height: 200px; background: #ccc;}
    .box .b{ left: 60px; top: 0; width: 100px; height: 400px; background: #eee; position: absolute;}
</style>
<div class="box">
    <div class="a">A</div>
    <div class="b">B</div>
</div>
.root{
    position:relative;
    overflow:hidden;
}
.left{
    position:abusolute;//左侧元素拖出文档流,父容器高度=右，左底部超级长，但是被父元素隐藏；
    padding-bottom:9999rem;
}

这种方法不适用左侧有“可能”比右侧长的情况，也就是说左侧再长，也撑不开父容器；

如果用js就很easy了：

$('.A').css('height', $('.B').innerHeight());

当然，纯粹的定位问题一般不建议用js。
应用float的元素设置height:100%;是没用的，但是绝对定位可以。
所以，把.left又包了一层，结构如下：

<div class="container clearfix">
    <div class="right">右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。右侧有很多内容，高度大于left。</div>
    <div class="left-wrapper">
        <div class="left">左侧内容，没有右侧多。左侧内容，没有右侧多。左侧内容，没有右侧多。左侧内容，没有右侧多。</div>
    </div>
</div>
.container{position: relative;overflow: hidden;width: 100%;background-color: rgba(255, 255, 0, 1);}
.right{float:right;width:68%;margin-left:2%;background-color: rgba(0, 0, 255, 0.6);}/* 把元素都设置成了右浮动，因为需要绝对定位的元素在左侧 */
.left-wrapper{float:right;width:30%;}
.left{position:absolute;width:30%;height:100%;background-color: rgba(0, 127, 0, 0.6);}/* 一定要设置left的宽度 */
.clearfix:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

可以参考这个问题(Mandarinazul的回答)：http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quot; xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> .content { position: relative; width: 100%; background-color: rgba(255,255,0,0.3); } .right { float: right; width: 60%; margin-left: 2%; background-color: rgba(0,255,255,0.6); } .left { position: absolute; width: 30%; height: 100%; background-color: rgba(255,0,255,0.3); } .wrap { float: left; width: 30%; } .clearfix:after { content: "."; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; } </style></head><body> <div class="content clearfix"> <div class="wrap"> <div class="left"> 左侧比右侧低左侧比右侧低左侧比右侧低左侧比右侧低左侧比右侧低左侧比右侧低左侧比右侧低左侧比右侧低左侧比右侧低左侧比右侧低左侧比右侧低左侧比右侧低 </div> </div> <div class="right"> 右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容右侧有很多内容 </div> </div></body></html>

试了一下
上面一位答主，但是wrap为什么高度为0？？？？？

【热门文章】
【热门文章】