Html 通过显示生成div：表具有父div的100%高度_Html_Css

Html 通过显示生成div：表具有父div的100%高度

html css

Html 通过显示生成div：表具有父div的100%高度,html,css,Html,Css,我正在尝试使用display:table填充其父div的100%。以下是div结构： <div id="container"> <div id="header"></div> <div id="body"> <div id="mytablediv"> <div class="row"> <div id="left"> </div>

我正在尝试使用

display:table

填充其父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>

这是我的全部代码。现在我真正想为

#mytablediv

做的是填充页眉和页脚之间的整个空白

这里有一个。

对于要使用的百分比高度

#mytablediv

（或任何其他元素），它的父元素必须在其上设置某种

高度。该父母的身高也可以是一个百分比，但是，在这种情况下，为了使该百分比起作用，它自己的父母（#mytablediv
的祖父母）也必须在其上设置某种身高。这一直到html
元素
在您的例子中，如果希望#mytablediv
具有页面（实际上是窗口）高度的100%
，那么您希望所有祖先上的“特定高度
”都是100%

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

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

这里有一个演示：
您可以在这里使用该属性，只需对#mytablediv

#mytablediv {
    height: inherit;
}

您已将div#container
指定为100%高度，您需要将上述属性分配给div#body
以获得所需的结果。
最后，我决定这是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});
    }
}

函数高度自动化（）{
var bodyHeight=$（“body”）.height（）；
var viewportHeight=$（窗口）.height（）；
var shudbe_bf_Height=$（“body”）.Height（）-153；/*153:div的高度+页脚*/
var real_bf_Height=$（“#mytablediv”）.Height（）；
if（实际高度<树状高度）{
$（“#bodyfix”）.css（{“height”：shudbe_bf_height}）；
}
}
您应该使用稍微不同的HTML部分结构，以获得所需的结果。我面临着同样的问题，我使用了如下所述的解决方案：

相关代码：
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拒绝计算“body”内容相对于其祖先css表行的高度，它坚持将其与外部div的高度关联起来。这正是我面临的问题
总而言之，如果IE改变了主体内容没有问题，此解决方案可能对您有用。
height:100%用于#body和tag。但其父级没有指定高度。它的父对象是div#body
，而不是body
。身高：100%在这种情况下效果不是最好的。这是因为还有另外两个div，页眉和页脚。高度100%使内容高度100%。应该是页眉+内容+页脚=100%高度