0

我觉得这很容易，但我不知道从哪里开始。
我想在页面顶部添加一个菜单，并在底部添加一些带有 % 的链接。
问题是我想把中心留空。我怎么做？我已经尝试过表格和 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>

笔记。有一个带有变化图像的背景。这就是为什么我希望中心是空的

4

1 回答 1

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;
}
于 2013-07-30T07:06:45.333 回答