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 元素设置heightwidth 为100% 时,默认情况下它会匹配最近的父布局为relativehtml 元素。

【讨论】:

【参考方案2】:

由于#content-wrap 让浏览器确定高度,您只需将#content 设置为父元素高度的100%。

#content
    height:100%;

如果它没有设置到那个高度,我猜想可能是稍后设置了一些 css 属性来覆盖这个。

【讨论】:

以上是关于CSS:强制子级使用父级(表格单元格)高度的主要内容,如果未能解决你的问题,请参考以下文章

如何用CSS 定制表格单元格的宽度和高度

表格单元格 div (IE) 中的 Textarea CSS height: 100%

Css中控制table单元格的间距

表格单元格垂直对齐的默认值

使 DIV 填充整个表格单元格

如何使用 CSS 拉伸表格单元格的背景图像?