Question

我觉得这很容易，但我不知道从哪里开始。
我想在页面顶部添加一个菜单，在底部添加一些带有％的链接问题是我想把中心留空。我怎么做？我试过桌子和css。

示例代码：

<body>
<table width="100%" height="337" border="1" align="center">
  <tr>
    <td height="36" align="center">Drop down menu(Should be centered) - 10% page fill</td>
  </tr>
  <tr>
    <td height="268">Empty space - 80% page fill</td>
  </tr>
  <tr>
    <td height="23">Bottom Text - 10% page fill</td>
  </tr>
</table>
</body>

请注意。有一个背景改变图像。这就是我希望中心空的原因

Answer 1

解决方案只是使用粘性页脚：

<强> HTML：

<!-- Navigation -->
<div class="menu">
    <h2>Menu</h2>
</div>

<!-- Content -->
<div class="page-wrap">
    <h2>Content</h2>
</div>

<!-- Sticky Footer -->
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

<强> CSS：

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

.menu {
    background-color: red;
    padding: 10px;
}

.page-wrap {
  background-color: green;
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

整页预览：http://jsfiddle.net/JCPAb/6/embedded/result/
Jsfiddle：http://jsfiddle.net/JCPAb/6/
来自：http://css-tricks.com/snippets/css/sticky-footer/

页眉和底页对齐

1 个答案: