Question

我正在尝试使用display:table填充100％的父div。这是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做的是填充页眉和页脚之间的整个空白区域。

这是live jsFiddle example。

Answer 1

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

即可

#mytablediv {
    height: inherit;
}

您已将div#container指定为100％的高度，您需要将上述属性指定给div#body以获得所需的结果。

Answer 2

对于处理#mytablediv（或任何其他元素）的百分比高度，它的父级必须设置某种height。父亲的height也可以是一个百分比，但是，在这种情况下，要使该百分比有效，它自己的父（#mytablediv的祖父母）也必须设置某种height在上面。这一直到html元素。

在您的情况下，如果您希望#mytablediv拥有100%页面的height（实际上是窗口），那么您将需要“特定height “对所有祖先来说都是100%。

html, body, #container, #body { height: 100% }

//now this works
#mytablediv {
    height: 100%;
}

以下是一个示例：http://tinkerbin.com/UBfgrRz5

Answer 3

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});
    }
}

Answer 4

您应该使用稍微不同的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行用于承载标题，而较低的css行用于承载页脚。它们都是根据内容自动调整大小。

用作身体容器的中间行通过将高度设置为100％来拉伸。关于“body”的内部内容，css行已被用于外部相对/内部绝对布局技术，以迫使内容适合“body”css行的边界内并允许溢出。 IE要求中间css表格单元以满足拉伸的要求。

此设计与FF + Chrome + Opera + Safari完美配合，但IE拒绝计算相对于其祖先css表行的“body”内容的高度，并且它仍然存在以将其与外部高度相关联DIV。这正是我所面临的问题。

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

使用display创建div：table具有父div的100％高度

4 个答案: