1

我正在尝试创建一个通用的页眉-正文-页脚部分，该部分根据其外部 div 的尺寸（宽度+高度）完全拉伸。这种方法的一个例子：

CSS

    .outer
    {
        position:relative;
        width:200px; 
        height:150px;
        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; 
    }
    .body-outer
    {
        position:relative;
        height:100%; 
        width:100%; 
    }
    .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

<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</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>

在 FF、Chrome、Safari 和 Opera 中一切正常。但不是在 IE 中……甚至在 IE10 中。问题是 IE 没有将“body”部分的高度识别为相对于其祖先“td”的高度，并将尊重的高度计算为相对于“外部”div。关于这个问题的任何想法？

4

1 回答 1

1

终于解开了这个谜团...... IE 应该在 Quirks 模式下运行 (!!!!) 以符合通用标准!!!

上述设计构成了基于 CSS 表格实现的完全弹性的 header-body-footer 部分。您可以在以下情况下使用它：

  1. 您有外箱的具体尺寸（即使使用百分比并遵循有关父容器高度等的已知约束......）
  2. 您希望外盒内的所有东西都是有弹性和自动拉伸的

一个完整的工作示例@jsfiddle：http: //jsfiddle.net/92y9L/9/

see code above (↑)

享受！

于 2013-09-07T11:54:54.237 回答