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 に答える