5

我正在尝试制作一个display:table100% 填充其父 div 的 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是填充页眉和页脚之间的整个空白区域。

这是一个现场 jsFiddle 示例。

4

4 回答 4

4

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

#mytablediv {
    height: inherit;
}

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

于 2012-11-28T17:22:18.433 回答
1

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

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

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

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

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

于 2012-11-28T17:11:40.297 回答
0

您应该使用稍微不同的 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 行用于托管页脚。它们都根据其内容自动调整大小。

中间一行作为body容器，通过设置高度为100%进行拉伸。关于“body”css 行的内部内容，已使用外部相对/内部绝对布局技术，以强制内容适合“body”css 行的边界内并允许溢出。IE需要中间css表格单元格才能满足拉伸的要求。

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

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

于 2013-08-31T19:23:17.967 回答
0

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});
    }
}
于 2012-11-29T11:57:04.750 回答