如何使浮动div达到其父级的100%高度?

为了 #outer 高度以其内容为准,并有 #inner 根据它的高度,使两个元素绝对定位。

css height property #内部 #外部 auto , 除非 #外部 #内部 除非 它本身是绝对定位的。

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

#内部 当然,a float 设置将被忽略,因此需要为其选择宽度 #内部 我怀疑你想要的文字包装。例如,下面的 #外部 是宽度 #内部 +3.方便(因为重点是 #内部 #内部 ,所以这看起来就像 #内部

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

我删除了我以前的答案,因为它是基于对你的目标有太多错误的假设。

对于家长:

display: flex;

你应该加一些前缀 http://css-tricks.com/using-flexbox/

唯一的缺点是IE和往常一样,IE9不支持flex。 http://caniuse.com/flexbox

编辑2: 正如@toddsby所指出的,align items用于parent,其默认值实际上是 伸展

编辑3: J中间: https://jsfiddle.net/bv71tms5/2/

实际上,只要父元素被定位,就可以将子元素的高度设置为100%。也就是说,如果您不希望父对象处于绝对位置。让我进一步解释:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>

display: table-cell 为此:

HTML格式:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS格式:

.inner {
    display: table-cell;
}

这将强制每个元素 .inner

example 解决你的问题。

你必须做一个包装,浮动它,然后绝对位置你的div,给它100%的高度。

HTML格式

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS格式:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

说明: 右边的div完全就位了。这意味着只有在CSS中显式声明了width或height属性时,它的width和height以及top和left位置才会基于第一个父div绝对或相对位置来计算;如果没有显式声明这些属性,则将基于父容器(.right wrapper)计算这些属性。

因此,DIV的100%高度将基于.container final height进行计算,.right position的最终位置将基于父容器进行计算。

这是一种更简单的方法:

1. 设置三个元素的容器(#outer)显示:table
3. 拆下浮动阀。
4. 成功。

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

Floated div, 100% height

如果您准备使用一点jQuery,答案很简单!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

这非常适用于将单个元素浮动到其父元素高度为100%的一侧,而其他浮动的元素通常会环绕在一侧。

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

上面是outer div的CSS

#inner{
width: 20%;
float: left;
border: 1px solid;
}

希望这对你有帮助

这对我很有帮助。

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

更改右:和左:以设置更好的#内部宽度。

https://css-tricks.com/using-flexbox/

套 display: flex; flex: 1;

尝试

#outer{overflow: auto;}

在以下位置显示更多选项: How do you keep parents of floated elements from collapsing?