在IE8中具有100％内容高度的页眉/页脚布局 [英] Header/Footer Layout with 100% Content Height in IE8

查看：176
本文介绍了在IE8中具有100％内容高度的页眉/页脚布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在试图计算如何实现这一点，没有JavaScript和填充，到目前为止任务不可能。有人知道如果有任何方式与纯CSS和div实现一个简单的布局：





http://jsfiddle.net/zLzg8v3s/1/



这正是我想尝试，但使用div和CSS： / p>

http://jsfiddle.net/u0u7snh6/1 /



HTML 

 < body class =table> 
< div id =headerclass =tableRowid =toprole =banner> 
< div class =tableCell> 
< div> 
这是顶部横幅
< / div> 
< / div> 
< / div> 
< div class =tableRow tableContent> 
< div class =tableCell> 
< div id =content> 
这是内容
< / div> 
< / div> 
< / div> 
< div id =footerclass =tableRowid =bottom> 
< div class =tableCell> 
< div> 
这是脚注
< / 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）Content div中的内容应该垂直对齐中间（非常重要的是内容单元格的BG也是100％高度，因此它连接到页眉和页脚）



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

  <！doctype html> 
< html lang =en-CAprefix =og：http://ogp.me/ns#\"> 
< head> 
< meta charset =utf-8> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，maximum-scale = 1/> 
< meta http-equiv =X-UA-Compatiblecontent =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 =headerclass =tableRowid =toprole =banner> 
< div class =tableCell> 
< div> 
这是顶部横幅
< / div> 
< / div> 
< / div> 
< div class =tableRow tableContent> 
< div class =tableCell> 
< div id =content> 
这是内容
< / div> 
< / div> 
< / div> 
< div id =footerclass =tableRowid =bottom> 
< div class =tableCell> 
< div> 
这是脚注
< / div> 
< / div> 
< / div> 
< / body> 
< / html>


解决方案

Okay在您的代码中发现了问题： http://jsfiddle.net/zLzg8v3s/9/
对于IE8测试： http://jsfiddle.net/zLzg8v3s/9/show/



CSS ：

  #content {
 margin：0 auto; 
}

删除 > 

  .tableContent * {
 height：100％; 
 vertical-align：middle; 
 margin：auto; 
}

删除星号修复一切。 >

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



HTML： 

 < div id =container> 
< div class =header> 
< h4>这是标题< / h4> 
< / div> 
< div class =row> 
< div class =content> 
< div class =left> Left Col< / div> 
< div class =middle>中集< br /> 
中集< br /> 
中集< br /> 
中集< br /> 
中集< br /> 
< / div> 
< div class =right>右栏< / div> 
< / div> 
< / div> 
< div class =footer> 
< h4>这是页脚< / h4> 
< / div> 
< / div>

CSS：

 code> 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; 
}


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;
    }

这篇关于在IE8中具有100％内容高度的页眉/页脚布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆