如何使浮动div的父级高度为100%?


256

这是HTML:

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

这是CSS:

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

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

我如何强制其为父div高度的100%?


1
因此,您希望文本在外部div中(而不是在内部div中),但浮动的内部div是外部div的高度吗?
edl 2010年

您想要达到的最终结果是什么?我想我的困惑在于,如果内部div与外部一样高,而外部与文本一样高,那与内部div中的文本不一样吗?
edl

2
@edl:是的,它是:)我这样想的原因是内部div的背景为图像。文字必须在它旁边。两者都需要在外部div内,因为它也具有背景图像。
内森·奥斯曼


2
看到并尝试解决这个问题的答案只是令人沮丧。
EternalHour'3

Answers:


125

为了使#outer高度基于其内容并#inner基于其高度,使两个元素都绝对定位。

可以在css height属性的规范中找到更多详细信息,但本质上,如果的height为,则#inner必须忽略#outerheight ,除非绝对定位。然后,高度将为0,除非将其自身绝对定位。#outerauto #outer#inner #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,因此无需在下面包装文字,因此看起来就像#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>

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


118
嗯..问题是关于浮动div的。您回答了绝对排名divs
Mihkel L. 2014年

57
我永远不会惊讶于实现疯狂简单的事情多么复杂HTML/CSS:)
Yuriy Nakonechnyy 2014年

15
有没有硬编码宽度的方法吗?对于响应式容器来说不是很好。
杰克·威尔逊

23
我不知道为什么这么多人对此表示赞同和反对。问题是关于浮动div的问题,这就是我从搜索中获得的动力,而这却回答了绝对定位的div。
Matt K

2
如何使一个浮动的容器垂直适合它的容器?通过不再使其漂浮!哈哈。很好的尝试,并且实际上足够接近以至于被认为有用。
罗尔夫(Rolf)

124

对于父母:

display: flex;

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

编辑:唯一的缺点是IE照常,IE9不支持flex。 http://caniuse.com/flexbox

编辑2:如@toddsby所述,align项是针对parent的,其默认值实际上是Stretch。如果您想要给child一个不同的值,则可以使用align-self属性。

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


3
您应该指出,这仅在现代浏览器中有效,并且甚至需要供应商前缀。
2014年

12
令我惊讶的是,由于最初的问题要求子级div处于浮动状态,并且所有位置:该解决方案并未得到更多的关注:绝对解决方案实际上在大多数使用float的情况下都会在工作中使用扳手。此解决方案提供了一个很好的解决方案,其中position:absolute的副作用不是问题,如果您愿意进一步研究,则可能会获得很好的跨浏览器兼容性。
路加福音

这就是答案。IE9将很快推出,并可能会给它一个良好的,坚实的支持。这个解决方案非常好,简单,容易...我已经完成了其他解决方案的研究。;)
jrista 2015年

2
根据Flexbox的最新规范,请参阅w3.org/TR/css-flexbox-1/#align-items-propertyalign-items: stretch;不需要,因为它是默认值。同样,它应该在父级而不是子级上定义。
toddsby

1
在答案中添加了小提琴。@Tigran
艾菲

77

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

14
太酷了,这比Chadwick的要求position:absolute(可能会干扰网站的样式)的限制要少
-henry

3
可能只有我一个人,但是如果侧边栏大于内容,则会出现问题。背景颜色将在父容器处停止,但侧栏内容将在父容器外溢出。
Howdy_McGee 2014年

这是一个更加灵活的解决方案,即使您有几个浮动的子元素,将它们的偏移设置为绝对定位的样式似乎也是可以接受的缺点。+1
kontur

谢谢你非常多。我已经将我的特定解决方案发布为对SO上另一个问题的解答:stackoverflow.com/a/31749164/84661
Brian Haak

24

只要您不需要支持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该类的每个元素占据其父元素的整个高度。


尽管此方法可行,但即使指定了页边距也不会显示页边距。因此,如果要分配边距,此解决方案将失败。您可以将填充分配为解决方法,但是如果需要边距(&不填充),您将如何解决呢?
Devner's

13
我在这里想念什么吗?您的问题要求浮动元素的高度为100%。浮动后,display: table-cell;元素不再填充其容器的高度了吗?我一定想念一些东西,因为这是你自己的问题...?
user56reinstatemonica8'4-4-25

16

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

您必须制作一个包装器,将其浮动,然后将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位置的最终位置。


1
这是情况固溶体中,你可以保证的是,.right列的含量比短.left列的内容。例如,如果您在某个组件上使用该组件,而该组件中的.left列具有一些大小可变的内容,而右列仅显示指向详细信息页面的箭头,则此解决方案效果很好。为此+1
Zachary Kniebel

15

这是一种更简单的方法:

  1. 设置三个元素的容器(#outer)显示:table
  2. 并设置元素本身(#inner)显示:table-cell
  3. 删除浮动。
  4. 成功。
#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

感谢@Itay in Floated div,高度为100%


8

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

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

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

希望这对其他jQuery爱好者有所帮助。


18
在这种布局问题上抛出javascript似乎是过分的。
2014年

1
作为必须在IE中进行开发的人:谢谢!
2014年

1
也许有点矫kill过正,但这是一个漂亮的答案,谢谢!
马丁

1
我同意所有定位问题都应该在没有JS的情况下解决。
michaeluskov

1
使用JS jQuery
实在是太

3

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

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

上面是外部div的CSS

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

上面是内部div

希望这对您有帮助


1

这对我有帮助。

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

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



By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.