[英]parent div with absolutely positioned child divs refuses to be 100% height
I want a 100% height div with absolutely positioned divs inside it. 我想要一个100%高度的div,里面有绝对定位的div。 For whatever reason when I add the child divs, the height of the parent div shrinks to the static content size.
无论出于何种原因,当我添加子div时,父div的高度会缩小到静态内容大小。
To clarify, I do not want the absolutely positioned elements to be full-height. 为了澄清,我不希望绝对定位的元素是全高的。 Just the containing div.
只是包含div。
I have (simplified) markup as follows: 我有(简化)标记如下:
<div id="content">
<div id="dashboard">
Some text
<div class="widget"></div>
<div class="widget"></div>
...
</div>
</div>
And the styling: 造型:
#content {
min-height: 100%;
}
#dashboard {
min-height: 100%;
height: 100%;
position: relative;
}
.widget {
height: 50px; /* arbitrary */
width: 50px;
position: absolute;
}
I have put #content
and #dashboard
as min-height 100% and height 100% and that works. 我把
#content
和#dashboard
作为最小高度100%和高度100%,这是有效的。 If I comment out the absolutely positioned divs, both are the full height of the screen. 如果我注释掉绝对定位的div,两者都是屏幕的全高。
But when I add the .widget
s, #content
is still full height (good) but #dashboard
becomes only the height of 'some text'. 但是,当我加入
.widget
S, #content
仍然充满高度(好),但#dashboard
变得只有“一些文本”的高度。 For whatever reason, adding absolutely positioned content to #dashboard
changes its height. 无论出于何种原因, 向
#dashboard
添加绝对定位的内容会改变其高度。
Note (edit) 注意(编辑)
I don't want
#content
to be 100% height because it needs to grow with content on other pages.我不希望
#content
高度为100%,因为它需要随着其他页面上的内容而增长。 I only want #dashboard to be exactly 100% height.我只希望#dashboard正好是100%的高度。
jQuery works, but I'd like to do it with css only jQuery有效,但我只想用css做
$("#dashboard").height( $("#content").height() );
Also I tried changing the type of display to block or inline for #content
and setting -moz-box-sizing to default because I read it can break min-height for Firefox. 此外,我尝试更改显示类型以阻止或内联
#content
并将-moz-box-sizing设置为默认值,因为我读到它可以打破Firefox的最小高度。
Any idea how to fix this? 知道如何解决这个问题吗?
Similar but not the same: How to set 100% height of a parent div with absolutely positioned children (not a duplicate)? 相似但不一样: 如何设置父div的100%高度与绝对定位的子(不重复)?
A percentage value for
min-height
property is calculated with respect to the height of the generated box's containing block.min-height
属性的百分比值是根据生成的框的包含块的高度计算的。 If theheight
of the containing block is not specified explicitly (ie, it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0 .如果未明确指定包含块的
height
(即,它取决于内容高度),并且此元素未绝对定位,则将百分比值视为0 。
Hence, you'll need to specify the height
of the #content
element explicitly to get min-height
property of #dashboard
element to work. 因此,您需要明确指定
#content
元素的height
,以使#dashboard
元素的min-height
属性起作用。
Thus, try using height
property for #content
instead of min-height
: 因此,尝试使用
#content
height
属性而不是min-height
:
#content {
height: 100%;
}
Here is a jsDiddle Demo . 这是一个jsDiddle演示 。
html, body {
height: 100%;
}
#content {
height: 100%;
}
#dashboard {
min-height: 100%;
position: relative;
}
.widget {
height: 50px; /* arbitrary */
width: 50px;
position: absolute;
}
<div id="content">
<div id="dashboard">
Some text
<div class="widget"></div>
<div class="widget"></div>
...
</div>
</div>
UPDATE UPDATE
I don't want
#content
to be full-size at all times.我不希望
#content
始终是全尺寸的。
Then, you'll need to use a fixed height for the #content
: 然后,您需要为
#content
使用固定高度:
#content {
height: 200px; /* or whatever you want */
}
#dashboard {
height: 100%; /* or inherit */;
}
Else, you should use JavaScript to calculate the needed height and apply that to the #dashboard
element. 否则,您应该使用JavaScript来计算所需的高度并将其应用于
#dashboard
元素。
Absolutely-positioned elements are no longer part of the layout. 绝对定位的元素不再是布局的一部分。 The parent element has no idea how big child items are.
父元素不知道子项有多大。
You need to set the height of the parent manually, or use JS to calculate the size of the child elements and apply accordingly. 您需要手动设置父级的高度,或使用JS计算子元素的大小并相应地应用。
Also, 100% height elements need their parent elements to be 100% height as well: 此外,100%高度元素也需要其父元素也是100%高度:
body, html { height:100% }
When you want to have a min-height of 100% (min 100%, expand when there is more content) for #content, use min-height together with height: auto
: 如果你希望#content的最小高度为100%(最小100%,有更多内容时展开),请使用min-height和
height: auto
:
body, html {
height: 100%;
}
#content {
min-height: 100%;
height: auto;
}
Furthermore, if i understand your question correctly, you could simply use position: absolute
together with top: 0; right: 0; bottom: 0; left: 0;
此外,如果我正确理解你的问题,你可以简单地使用
position: absolute
和top: 0; right: 0; bottom: 0; left: 0;
top: 0; right: 0; bottom: 0; left: 0;
to have exactly a height of 100% for #dashboard. #dashboard的高度为100%。 Add
position: relative
to #content if the height of #dashboard should be relative to #content. 添加
position: relative
对于#content,如果#dashboard的高度应该相对于#content。
Absolute elements are taken out of the flow. 绝对元素从流程中取出。 If they are out of the flow, they do not add height to their parent.
如果他们不在流程中,他们就不会为父母增加身高。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.