如何使浮动div的父级高度为100％？

小宇宙阳光2020-03-24

这是HTML：

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

这是CSS：

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

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

我如何强制其为父div高度的100％？

村村Eva2020/03/24 14:55:18

这对我有帮助。

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

右移和左移：设置更好的＃内部宽度。

DavaidTony宝儿2020/03/24 14:55:18

尝试

#outer{overflow: auto;}

show more options in: How do you keep parents of floated elements from collapsing?

Itachi2020/03/24 14:55:18

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

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

设置display: flex;为家长和flex: 1;儿童元素，它们都具有相同的高度。

小胖2020/03/24 14:55:18

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

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

上面是外部div的CSS

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

上面是内部div

希望这对你有帮助

十三GreenEva2020/03/24 14:55:18

我举了一个解决您的问题的例子。

您必须制作一个包装器，将其浮动，然后将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;
}

说明： .right div是绝对定位的。这意味着只有在CSS中明确声明width或height属性时，才会根据绝对或相对位置的第一个父div计算其宽度和高度以及顶部和左侧的位置；如果未明确声明它们，则将基于父容器（.right-wrapper）计算这些属性。

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

老丝阿飞2020/03/24 14:55:18

这是一种更简单的方法：

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

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

感谢@Itay in Floated div，高度为100％

理查德逆天2020/03/24 14:55:18

只要您不需要支持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：