IE8 中具有 100% 内容高度的页眉/页脚布局
我一直试图弄清楚如何在没有 JavaScript 和填充的情况下实现这一目标，但到目前为止，这是不可能完成的任务.有谁知道纯CSS和div有什么办法可以实现简单的布局:
http://jsfiddle.net/zLzg8v3s/1/
这正是我想要做的，但使用 div 和 CSS:
http://jsfiddle.net/u0u7snh6/1/
HTML
<body class="table"><div id="header" class="tableRow" id="top" role="banner"><div class="tableCell">这是顶部横幅</div></div></div><div class="tableRow 表格内容"><div class="tableCell"><div id="内容">这是内容</div></div></div><div id="footer" class="tableRow" id="bottom"><div class="tableCell">这是页脚</div></div></div></身体>CSS
html, 正文 {高度:100%；边距:0；填充:0；}.桌子 {显示:表格；高度:100%；宽度:100%；}.tableRow {显示:表格行；文本对齐:居中；高度:1px；}.tableCell {显示:表格单元格；垂直对齐:中间；}.tableCell div {最大宽度:400px；边距:自动；背景颜色:棕色；}.tableContent {高度:100%；背景颜色:黄色；垂直对齐:中间；}.tableContent * {高度:100%；垂直对齐:中间；边距:自动；}.contentDiv {边距:自动；位置:绝对；顶部:0；左:0；底部:0；右:0；}#标题{背景颜色:粉红色；}#页脚{背景颜色:橙色；}这是尽可能接近布局...我无法解决的问题:
1) Content div 内的内容应该垂直居中对齐(非常重要的是内容单元格的 BG 也是 100% 高度，因此它连接到页眉和页脚)
2) 不应该有任何溢出:这只是 IE8 行为(据我所知)，所以在 JsFiddle 中很难看到......下面的完整代码可以用IE8的仿真模式在本地测试:
<!doctype html><html lang="en-CA" 前缀="og: http://ogp.me/ns#"><头><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>模型</title><风格>html，正文 {高度:100%；边距:0；填充:0；}.桌子 {显示:表格；高度:100%；宽度:100%；}.tableRow {显示:表格行；文本对齐:居中；高度:1px；}.tableCell {显示:表格单元格；垂直对齐:中间；}.tableCell div {最大宽度:1200px；边距:自动；背景颜色:棕色；}.tableContent {高度:100%；背景颜色:黄色；垂直对齐:中间；}.tableContent * {高度:100%；垂直对齐:中间；边距:自动；}.contentDiv {边距:自动；位置:绝对；顶部:0；左:0；底部:0；右:0；}#标题{背景颜色:粉红色；}#页脚{背景颜色:橙色；}</风格></头><body class="table"><div id="header" class="tableRow" id="top" role="banner"><div class="tableCell">这是顶部横幅</div></div></div><div class="tableRow 表格内容"><div class="tableCell"><div id="内容">这是内容</div></div></div><div id="footer" class="tableRow" id="bottom"><div class="tableCell">这是页脚</div></div></div></身体></html>好的，在你的代码中找到了问题:http://jsfiddle.net/zLzg8v3s/9/对于 IE8 测试:http://jsfiddle.net/zLzg8v3s/9/show/
CSS:
#content{边距:0 自动；}从您的 CSS 中删除:
.tableContent * {高度:100%；垂直对齐:中间；边距:自动；}删除星号修复了所有问题.
解决方案:2 JSFIDDLE: http://jsfiddle.net/p1bbyfqa/2/
HTML:
<div id="container"><div 类="标题"><h4>这是标题</h4></div><div 类="行"><div 类="内容"><div class="left">左列</div><div class="middle">Middle Col<br/>中列<br/>中列<br/>中列<br/>中列<br/></div><div class="right">右列</div></div></div><div 类="页脚"><h4>这是页脚</h4></div></div>CSS:
html, 正文 {高度:100%；边距:0；填充:0；}#容器 {显示:表格；高度:100%；宽度:100%；文本对齐:居中；}.排 {显示:表格行；宽度:100%；高度:100%；}.页眉页脚{背景:粉红色；显示:表格行；文本对齐:居中；垂直对齐:中间；}.内容 {显示:表格；背景:棕色；宽度:100%；高度:100%；溢出:自动；}.左右{背景:绿色；显示:表格单元格；宽度:10%；垂直对齐:中间；}.中间{背景:棕色；显示:表格单元格；垂直对齐:中间；}I've been trying to figure how to achieve this without JavaScript and padding and so far it's been mission impossible. Does anyone know if there is any way with pure CSS and divs to achieve a simple layout:
http://jsfiddle.net/zLzg8v3s/1/
This is exactly what I'm trying to do but with divs and CSS:
http://jsfiddle.net/u0u7snh6/1/
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;
}
This is as close as I can get to the layout... what I cannot fix:
1) The content inside the Content div should be vertically aligned middle (very important that the BG of the content cell also is 100% height so it connects to the header and footer)
2) There should not be any overflow: this is a IE8 behavior only (as far as I could tell), so it will be hard to see in JsFiddle... the full code below can be tested locally with IE8's emulation mode:
<!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>
解决方案
Okay found the problem in your code: http://jsfiddle.net/zLzg8v3s/9/ For IE8 testing : http://jsfiddle.net/zLzg8v3s/9/show/
CSS:
#content{
margin: 0 auto;
}
Remove this from your css:
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
Removing the asterisk fixed everything.
Solution: 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;
}
相关文章