这是HTML:
<div id="outer">
<div id="inner"></div>
Test
</div>
这是CSS:
#inner {
float: left;
height: 100%;
}
使用Chrome开发人员工具检查后,内部div的高度为0px。
我如何强制其为父div高度的100%?
这是HTML:
<div id="outer">
<div id="inner"></div>
Test
</div>
这是CSS:
#inner {
float: left;
height: 100%;
}
使用Chrome开发人员工具检查后,内部div的高度为0px。
我如何强制其为父div高度的100%?
Answers:
为了使#outer
高度基于其内容并#inner
基于其高度,使两个元素都绝对定位。
可以在css height属性的规范中找到更多详细信息,但本质上,如果的height为,则#inner
必须忽略#outer
height ,除非绝对定位。然后,高度将为0,除非将其自身绝对定位。#outer
auto
#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>
我删除了之前的答案,因为它基于对您的目标的太多错误假设。
HTML/CSS
:)
对于父母:
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/
align-items: stretch;
不需要,因为它是默认值。同样,它应该在父级而不是子级上定义。
实际上,只要定位父元素,就可以将子元素的高度设置为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>
position:absolute
(可能会干扰网站的样式)的限制要少
只要您不需要支持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
该类的每个元素占据其父元素的整个高度。
display: table-cell;
元素不再填充其容器的高度了吗?我一定想念一些东西,因为这是你自己的问题...?
您必须制作一个包装器,将其浮动,然后将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中明确声明width或height属性的情况下,才根据绝对或相对位置的第一个父div计算其宽度和高度以及顶部和左侧的位置;如果未明确声明它们,则将基于父容器(.right-wrapper)计算这些属性。
因此,将根据.container最终高度计算DIV的100%高度,并根据父容器计算.right位置的最终位置。
.right
列的含量比短.left
列的内容。例如,如果您在某个组件上使用该组件,而该组件中的.left
列具有一些大小可变的内容,而右列仅显示指向详细信息页面的箭头,则此解决方案效果很好。为此+1
这是一种更简单的方法:
#outer{
display: table;
}
#inner {
display: table-cell;
float: none;
}
感谢@Itay in Floated div,高度为100%
如果您准备使用一些jQuery,答案很简单!
$(function() {
$('.parent').find('.child').css('height', $('.parent').innerHeight());
});
这对于将单个元素浮动到父元素高度为100%的一侧非常有效,而通常会环绕的其他浮动元素则保留在一侧。
希望这对其他jQuery爱好者有所帮助。
当您需要几个高度相同的子元素时,可以使用flexbox解决类似的情况:
https://css-tricks.com/using-flexbox/
设置display: flex;
为家长和flex: 1;
儿童元素,它们都具有相同的高度。