IE8中100％内容高度的页眉/页脚布局

我一直在想如何在没有JavaScript和填充的情况下实现这一目标，并且迄今为止它一直是不可能完成的任务。有谁知道是否有任何方式用纯CSS和div的实现一个简单的布局：IE8中100％内容高度的页眉/页脚布局

Simple Layout

这正是我想要做的，但用的div和CSS：

HTML

<body class="table"> 
<div id="header" class="tableRow" id="top" role="banner"> 
    <div class="tableCell"> 
     <div> 
      This is the top banner 
     </div> 
    </div> 
</div> 
<div class="tableRow tableContent"> 
    <div class="tableCell"> 
     <div id="content"> 
      This is the content 
     </div> 
    </div> 
</div> 
<div id="footer" class="tableRow" id="bottom"> 
    <div class="tableCell"> 
     <div> 
      This is the footer 
     </div> 
    </div> 
</div> 
</body>

CSS

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.table { 
    display: table; 
    height: 100%; 
    width: 100%; 

} 
.tableRow { 
    display: table-row; 
    text-align: center; 
    height: 1px; 
} 

.tableCell { 
    display: table-cell; 
    vertical-align: middle; 

} 

.tableCell div { 
    max-width: 400px; 
    margin: auto; 
    background-color: brown; 
} 

.tableContent { 
    height: 100%; 
    background-color: yellow; 
    vertical-align: middle; 
} 

.tableContent * { 
    height: 100%; 
    vertical-align: middle; 
    margin: auto; 
} 

.contentDiv { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

#header { 
    background-color: pink; 
} 
#footer { 
    background-color: orange; 
}

这是接近我能到布局......我无法修复：

1）内容DIV中的内容应垂直对齐（非常重要的是，内容单元的BG也是100％高度，因此它连接到页眉和页脚）

2）不应该有任何溢出：这是一个IE8行为只（据我所知），所以这将是很难在的jsfiddle看到...下面的完整代码可以在本地使用IE8的仿真模式测试：

<!doctype html> 
<html lang="en-CA" prefix="og: http://ogp.me/ns#"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>MOCKUP</title> 

    <style> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     .table { 
      display: table; 
      height: 100%; 
      width: 100%; 

     } 
     .tableRow { 
      display: table-row; 
      text-align: center; 
      height: 1px; 
     } 

     .tableCell { 
      display: table-cell; 
      vertical-align: middle; 

     } 

     .tableCell div { 
      max-width: 1200px; 
      margin: auto; 
      background-color: brown; 
     } 

     .tableContent { 
      height: 100%; 
      background-color: yellow; 
      vertical-align: middle; 
     } 

     .tableContent * { 
      height: 100%; 
      vertical-align: middle; 
      margin: auto; 
     } 

     .contentDiv { 
      margin: auto; 
      position: absolute; 
      top: 0; left: 0; bottom: 0; right: 0; 
     } 

     #header { 
      background-color: pink; 
     } 
     #footer { 
      background-color: orange; 
     } 

    </style> 
</head> 
<body class="table"> 
<div id="header" class="tableRow" id="top" role="banner"> 
    <div class="tableCell"> 
     <div> 
      This is the top banner 
     </div> 
    </div> 
</div> 
<div class="tableRow tableContent"> 
    <div class="tableCell"> 
     <div id="content"> 
      This is the content 
     </div> 
    </div> 
</div> 
<div id="footer" class="tableRow" id="bottom"> 
    <div class="tableCell"> 
     <div> 
      This is the footer 
     </div> 
    </div> 
</div> 
</body> 
</html>

来源

2014-08-30 Nicolas Bouvrette

奥凯发现在你的代码的问题：http://jsfiddle.net/zLzg8v3s/9/ 对于IE8测试：http://jsfiddle.net/zLzg8v3s/9/show/

CSS：

#content{ 
    margin: 0 auto; 
}

从哟删除这你的css：

.tableContent * { 
    height: 100%; 
    vertical-align: middle; 
    margin: auto; 
}

删除星号固定了一切。

解决方案：2的jsfiddle：http://jsfiddle.net/p1bbyfqa/2/

HTML：

<div id="container"> 
     <div class="header"> 
     <h4>This is header</h4> 
     </div> 
     <div class="row"> 
     <div class="content"> 
      <div class="left">Left Col</div> 
      <div class="middle">Middle Col<br /> 
       Middle Col<br /> 
       Middle Col<br /> 
       Middle Col<br /> 
       Middle Col<br /> 
      </div> 
      <div class="right">Right Col</div> 
     </div> 
    </div> 
    <div class="footer"> 
     <h4>This is footer</h4> 
    </div> 
</div>

CSS：

html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 

    #container { 
     display: table; 
     height: 100%; 
     width: 100%; 
     text-align: center; 
    } 

    .row { 
    display: table-row; 
    width:100%; 
    height: 100%; 

    } 

    .header, .footer{ 
    background: pink; 
    display:table-row; 
    text-align: center; 
    vertical-align: middle; 
    } 

    .content { 
     display: table; 
     background: brown; 
     width:100%; 
     height: 100%; 
     overflow: auto; 
    } 
    .left, .right{ 
     background: green; 
     display: table-cell; 
     width:10%; 
     vertical-align: middle; 
    } 
    .middle{ 
     background: brown; 
     display: table-cell; 
     vertical-align: middle; 
    }

来源

2014-08-30 15:23:57 Ani

这简化版，工作将如果添加多的内容（至少在IE8中）和填充仍然是一个问题：http://jsfiddle.net/zLzg8v3s/3/ – 2014-08-30 15:29:06

检查第二个选项..更新后的答案..Thx指出它 – Ani 2014-08-30 15:32:13

其实你有没有在IE8中试过这个？它不适合我。这是这里的主要问题......不幸的是我需要支持IE8。 – 2014-08-30 15:40:23

IE8中100％内容高度的页眉/页脚布局

回答

相关问题