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

Question

这是 HTML：

<div id="outer">
    <div id="inner"></div>
    Test
</div>

这是 CSS：

#inner {
  float: left;
  height: 100%;
}

使用 Chrome 开发者工具检查后，内部 div 的高度为 0px。

如何强制它为父 div 高度的 100%？

Answer 1

对于父级：

display: flex;

您应该添加一些前缀 http://css-tricks.com/using-flexbox/< /a>

编辑：
唯一的缺点是IE一如既往，IE9不支持flex。
http://caniuse.com/flexbox

编辑2：
正如 @toddsby 所指出的，对齐项目是针对父项的，其默认值实际上是 stretch。如果你想要子元素有不同的值，可以使用align-self属性。

编辑3：
jsFiddle： https://jsfiddle.net/bv71tms5/2/

Answer 2

要使 #outer 高度基于其内容，并让 #inner 以其高度为基础，使两个元素绝对定位。

更多详细信息可以在 css height 属性，但本质上，如果 #outer 的高度为 auto，#inner 必须忽略 #outer 高度， 除非 #outer 是绝对定位的。那么#inner高度将为0，除非#inner本身是绝对定位的。

<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>

但是...通过绝对定位 #inner，float 设置将被忽略，因此您需要显式选择 #inner 的宽度，并在 #outer 中添加填充以伪造我怀疑您想要的文本换行。例如，下面的#outer的填充是#inner的宽度+3。方便的是（因为重点是让 #inner 高度达到 100%），不需要在 #inner 下面包裹文本，所以这看起来就像 #内部 是浮动的。

<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>

我删除了之前的答案，因为它基于对您的目标的太多错误假设。

Answer 3

其实只要父元素定位好，就可以将子元素的高度设置为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>

Answer 4

只要您不需要支持 IE8 之前的 Internet Explorer 版本，就可以使用 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 类的每个元素占据其父元素的整个高度。

Answer 5

我做了一个示例来解决您的问题。

你必须制作一个包装器，将其浮动，然后绝对定位你的 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"> </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;
}

说明： .right div 是绝对定位的。这意味着只有在 CSS 中显式声明宽度或高度属性时，才会根据绝对或相对定位的第一个父 div 来计算其宽度和高度以及顶部和左侧位置；如果没有显式声明，这些属性将根据父容器 (.right-wrapper) 计算。

因此，DIV的100%高度将根据.container最终高度计算，.right位置的最终位置将根据父容器计算。

Answer 6

这里有一个更简单的方法来实现这一点：

1. 设置三个元素的容器（#outer）显示：table
2. 并设置元素本身（#inner）显示：table-cell
3. 删除浮动。
4. 成功。

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

感谢 浮动 div，100% 高度中的 @Itay

Answer 7

如果您准备使用一点 jQuery，答案很简单！

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

这对于将单个元素浮动到其父元素高度为 100% 的一侧非常有效，而通常会环绕的其他浮动元素则保留在一侧。

希望这对 jQuery 粉丝有所帮助。

Answer 8

这是等高网格系统的代码示例。

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

上面是外部 div 的 CSS

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

上面是内部 div

希望这对你有帮助

Answer 9

这对我有帮助。

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

更改 right: 和 left: 以设置首选的 #inner 宽度。

Answer 10

当您需要多个子元素具有相同高度时，可以使用 flexbox 解决类似的情况：

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

为父元素设置 display: flex; ，为子元素设置 flex: 1; ，它们都将具有相同的高度。

Answer 11

适用于新绿色浏览器的简单解决方案。
答案是-webkit-fill-available

#inner {
        min-height: -moz-available;
        min-height: -webkit-fill-available;
        min-height: fill-available;
    }

Answer 12

尝试

#outer{overflow: auto;}

在以下位置显示更多选项：
如何防止浮动元素的父元素折叠？< /a>