LeRoy LeRoy - 10 months ago 96
HTML Question

Page Header and Bottom Page alignment

I have a feeling this is easy but I have no idea where to start.

I will like to add a menu at the top of the page and some links at the bottom with %.

The problem is I would like to leave the Center empty. How do I do that? I have tried tables and css.

Sample Code:

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

Note. There is a Background with changing images. That's why I want the center empty

Answer Source

The solution is just using sticky footer:


<!-- Navigation -->
<div class="menu">

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

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


* {
  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;