CSS:强制子级使用父级(表格单元格)高度
Posted
技术标签:
【中文标题】CSS:强制子级使用父级(表格单元格)高度【英文标题】:CSS: Force child to use parent (table-cell) height 【发布时间】:2013-06-01 07:07:09 【问题描述】:#wrapper
display: table;
min-height: 100%;
height: 100%;
margin: 0px auto;
#header-wrap,
#content-wrap,
#footer-wrap
display: table-row;
height: 1px;
#content-wrap
height: auto;
<div id="wrapper">
<div id="header-wrap"></div>
<div id="content-wrap">
<section id="content"></section>
</div>
<div id="header-wrap"></div>
</div>
#wrapper
充当表格,其中#header-wrap
、#content-wrap
和#footer-wrap
是有助于将页脚推到页面底部的表格单元格。
我怎样才能得到部分 #content
填充 #content-wrap
的高度?
我不会使用绝对定位。
【问题讨论】:
【参考方案1】:考虑这个例子...
<div>
<p>Lorem ipsum dolor sit amet cosectetur...</p>
</div>
以及给定的 CSS3 代码:
div
position: relative;
div>p
height: 100%;
position: absolute;
当absolute
元素设置height
或width
为100% 时,默认情况下它会匹配最近的父布局为relative
或html
元素。
【讨论】:
【参考方案2】:由于#content-wrap
让浏览器确定高度,您只需将#content
设置为父元素高度的100%。
#content
height:100%;
如果它没有设置到那个高度,我猜想可能是稍后设置了一些 css 属性来覆盖这个。
【讨论】:
以上是关于CSS:强制子级使用父级(表格单元格)高度的主要内容,如果未能解决你的问题,请参考以下文章