html怎么让div上浮,css - 如何使浮动div的父级100％高度？

最新推荐文章于 2021-08-04 09:11:20 发布

weixin_39969340

最新推荐文章于 2021-08-04 09:11:20 发布

阅读量3.1k

点赞数

文章标签： html怎么让div上浮

该博客讨论了如何在CSS中处理浮动div的父级高度为100%的问题。解决方案包括使用`display: flex`、绝对定位、设置`position: relative`等方法。文章提供了不同代码示例，解释了不同技术的工作原理及其适用场景，旨在确保浮动元素的父级能够正确适应内容的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这是HTML：

Test

这是CSS：

#inner {

float: left;

height: 100%;

}

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

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

Nathan Osman asked 2019-02-21T10:36:13Z

11个解决方案

123 votes

对于#inner高度要根据其内容，并且其高度为float，使两个元素绝对定位。

更多细节可以在css height属性的规范中找到，但实质上，#inner必须忽略float高度，如果#inner的高度是#outer，除非绝对定位#outer。那么#inner的高度将为0，除非#inner本身绝对定位。

#outer {

position:absolute;

height:auto; width:200px;

border: 1px solid red;

}

#inner {

position:absolute;

height:100%;

width:20px;

border: 1px solid black;

}

text

但是......通过绝对定位#inner，将忽略float设置，因此您需要明确选择#inner的宽度，并在#outer中添加填充以伪造我怀疑您想要的文本包装。例如，下面，#outer的填充是#inner +3的宽度。方便(因为整点是#inner高度为100％)没有必要在#inner下面包装文本，所以这看起来就像#inner浮动。

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

}

text

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

Chadwick answered 2019-02-21T10:36:56Z

112 votes

对于父母：

display: flex;

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

编辑：唯一的缺点是IE像往常一样，IE9不支持flex。[http://caniuse.com/flexbox]

编辑2：正如@toddsby所指出的那样，对齐项目是针对父级的，其默认值实际上是拉伸。如果你想为孩子提供不同的价值，那就是align-self属性。

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

Aiphee answered 2019-02-21T10:38:00Z

72 votes

实际上，只要定位了父元素，就可以将子元素的高度设置为100％。即，如果您不希望父母绝对定位。让我进一步解释一下：

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

}

Nathaniel Schweinberg answered 2019-02-21T10:38:31Z

23 votes

只要您不需要支持早于IE8的Internet Explorer版本，您就可以使用.inner来完成此任务：

HTML：

Menu or Whatever

Page contents...

CSS：

.inner {

display: table-cell;

}

这将强制具有.inner类的每个元素占据其父元素的完整高度。

Nathan Osman answered 2019-02-21T10:39:15Z

15 votes

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

你必须做一个包装，漂浮它，然后绝对你的div，并给它100％的高度。

HTML

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

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

CSS：

.container {

width: 100%;

position:relative;

}

.left {

width: 50%;

background-color: rgba(0, 0, 255, 0.6);

float: left;

}

.right-wrapper {