Question

我一直试图想出如何在没有JavaScript和填充的情况下实现这一目标，到目前为止，这是不可能的任务。有没有人知道是否有任何方式使用纯CSS和div来实现简单的布局：

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）Content 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>

Answer 1

好的，您的代码中发现了问题：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;
    }

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

1 个答案: