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％內容高度的頁眉/頁腳佈局

回答

相關問題