使用display:table使div具有父div的100%高度

我正试图用display:table使div填充其父div的100%。下面是div结构：

<div id="container">
<div id="header"></div>
<div id="body">
<div id="mytablediv">
<div class="row">
<div id="left"> </div>
<div id="content">&nbsp; </div>
<div id="right"> </div>
</div>
</div>
</div>
<div id="footer"></div>
</div>

这是CSS：

html, body { margin:0; padding:0; height:100%; }
#container { min-height:100%; position:relative; }
#header { background:#ff0; padding:10px; }
#body { padding:10px; padding-bottom:60px; }
#footer { position:absolute; bottom:0; width:100%; height:60px;background:#6cf;
}
#mytablediv { display:table; }
#row { display:table-row; }
#left, #content, #right {display:table-cell;}
#left, #right {background-color:red;}

这是我的完整代码。现在，我真正想为#mytablediv做的是填充页眉和页脚之间的整个空白。

下面是一个jsFiddle的实例。

您可以在此处使用inheritance属性，只需对#mytablediv使用以下内容

#mytablediv {
height: inherit;
}

如果已将div#container指定为100%高度，则需要将上述属性分配给div#body才能获得所需的结果。

若要在#mytablediv(或任何其他元素)上使用百分比高度，它的父级必须设置某种height。该父级的height也可以是百分比，但在这种情况下，要使该百分比起作用，它自己的父级(#mytablediv的祖父母)也必须设置某种height。这一直到html元素。

在您的情况下，如果您希望#mytablediv具有页面(实际上是窗口)的height的100%，那么您将希望所有祖先的"特定height"都是100%。

html,
body,
#container,
#body {
height: 100%
}
/* now this works */
#mytablediv {
height: 100%;
}

下面是一个演示：https://jsfiddle.net/joplomacedo/u4hezyav/

Atlast，我决定这是jQuery的工作。

function heightAutomate() {
var bodyHeight = $("body").height();
var viewportHeight = $(window).height();
var shudbe_bf_Height = $("body").height() - 153; /*153:height of div+footer*/
var real_bf_Height = $("#mytablediv").height();
if (real_bf_Height < shudbe_bf_Height) {
$("#bodyfix").css({"height":shudbe_bf_Height});
}
}

您应该使用稍微不同的HTML部分结构来实现所需的结果。我面临着同样的问题，我使用了如下所述的解决方案：

http://jsfiddle.net/92y9L/

相关代码：

CSS

*{
margin:0;
border:0;
padding:0;
}
.outer
{
position:relative;
width:250px; 
height:350px;
border:1px dotted black;
margin:-1px;
}
.tbl
{
display:table; 
width:100%; 
height:100%;
}
.tr
{
display:table-row;
}
.td
{
display:table-cell; 
margin:0 auto;
text-align:center; 
}
.tr .body-outer
{
height:100%; 
width:100%; 
}
.body-outer
{
position:relative;
}
.body-inner
{
position:absolute; 
top:0; 
right:0; 
bottom:0; 
left:0; 
overflow-y:auto; 
overflow-x:auto;
}
.stretch-x
{
width:100%;
}
.stretch-y
{
height:100%;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body>
<div class="outer">
<div class="tbl">
<div class="tr" style="background-color:Red;">
<p>test paragraph. This is used as placeholder<br />new line....</p>
</div>
<div class="tr stretch-y" style="background-color:Gray;">
<div class="td stretch-y" style="background-color:Blue;">
<div class="body-outer" style="background-color:Green;">
<div class="body-inner">
<p style=" white-space:nowrap;">test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
</div>
</div>
</div>
</div>
<div class="tr" style="background-color:Red;">
<p>test paragraph. This is used as placeholder<br />new line.</p>
</div>
</div>
</div>
</body>

这种方法的概念是使用一个内部css表，在外部容器的边界下有三行css表。上面的css行用于承载页眉，下面的行用于承载页脚。它们都是根据内容自动调整大小的。

中间一行用作主体容器，通过将高度设置为100%来拉伸。关于"body"css行的内部内容，已经使用了外部相对/内部绝对布局技术，以迫使内容嵌入"body"css行的边界内，并允许溢出。IE需要中间css表单元格来满足拉伸的要求。

这种设计与FF+Chrome+Opera+Safari完美配合，但IE拒绝计算"正文"内容相对于其祖先css表行的高度，并坚持将其与外部div的高度相关联。这正是我面临的问题。

总之，如果IE改变正文内容没有问题，这个解决方案可能对你有用。

相关内容

最新更新

热门标签：