css stretching the 2 column grail to meet a footer_问答_开发者

I am sure this is a common frustration - but I am trying to just do a two column liquid with a footer in rails.

The problem that I am having is that I can get the footer to stick on the bottom, or to the columns. I am using this for my basis for the columns, I just need them to stretch to the bottom of the page, filling with color!!

The layout for the frame:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Shows: <%= controller.action_name %> </title>
    <%=  stylesheet_link_tag 'frame', 'show' %>
  </head>
  <body>
    <div id="header">
    </div>

    <div class="colmask ">
      <div class="colleft">

        <div class="main"> <!-- The Main window -->
          <% if flash[:notice] -%>
            <div id="flash"><%= flash[:notice] %> </div>
          <% end -%>
          <%= yield %>
        </div>

        <div class="side"> <!-- The Sidebar -->
          <%= link_to "Home", :controller => :shows, :action => :index %><br/>
          <br/>
          Shows<br/>
          <% Show.all.each do |sh| %>
            <div class="side_title">
              <%= link_to sh.title, show_url(sh) %><br/>
            </div>
          <% end %>
        </div>
      <div id="push"></div>
      </div>
    </div>
    <div id="footer"> <!-- Put a footer in this panel -->
      This is where some more information can go...
    </div>
  </body>
</html>

The CSS - probably full of problems...help!?:

/*
   Template for layout from
    http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
   Thanks!
*/

html {
  height: 100%;
}

body {
  margin:0;
  padding:0;
  border:0;         /* This removes the border around the viewport in old versions of IE */
  width:100%;
  background:#fff;
  min-width:600px;      /* Minimum width of layout - remove line if not required */
                        /* The min-width property does not work in old versions of Internet Explorer */
  font-size:90%;
  height: 100%;
}
a {
  color:#369;
}
a:hover {
  color:#fff;
  background:#369;
  text-decoration:none;
}
h1, h2, h3 {
  margin:.8em 0 .2em 0;
  padding:0;
}
p {
  margin:.4em 0 .8em 0;
  padding:0;
}
img {
  margin:10px 0 5px;
}

/* Header styles */
#header {
  clear:both;
  float:left;
  width:100%;
}
#header {
  border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
  padding:.4em 15px 0 15px;
  margin:0;
}
#header ul {
  cl开发者_如何学运维ear:left;
  float:left;
  width:100%;
  list-style:none;
  margin:10px 0 0 0;
  padding:0;
}
#header ul li {
  display:inline;
  list-style:none;
  margin:0;
  padding:0;
}
#header ul li a {
  display:block;
  float:left;
  margin:0 0 0 1px;
  padding:3px 10px;
  text-align:center;
  background:#eee;
  color:#000;
  text-decoration:none;
  position:relative;
  left:15px;
  line-height:1.3em;
}
#header ul li a:hover {
  background:#369;
  color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
  color:#fff;
  background:#000;
  font-weight:bold;
}
#header ul li a span {
  display:block;
}

/* 'widths' sub menu */
#layoutdims {
  clear:both;
  background:#eee;
  border-top:4px solid #000;
  margin:0;
  padding:6px 15px !important;
  text-align:right;
}

/* column container */
.colmask {
  position:relative;    /* This fixes the IE7 overflow hidden bug */
  clear:both;
  float:left;
  width:100%;           /* width of whole page */
  overflow:hidden;      /* This chops off any overhanging divs */

}
/* common column settings */
.colleft {
  float:left;
  width:100%;
  position:relative;

  min-height: 100%;
  height: auto;
  height: 100%;
  margin: 0 auto -60px;
}

.main,
.side {
  float:left;
  position:relative;
  padding:0 0 1em 0;
  overflow:hidden;
}

/* 2 Column (left menu) settings */
.colmask {
  background:orange;            /* right column background colour */
}
.colmask .colleft {
  right:75%;            /* right column width */
  background:green;     /* left column background colour */
}
.colmask .main {
  width:71%;            /* right column content width */
  left:102%;                    /* 100% plus left column left padding */
}
.colmask .side {
  width:21%;            /* left column content width (column width minus left and right padding) */
  left:6%;          /* (right column left and right padding) plus (left column left padding) */
}

#push, #footer {
  height: 60px;
  clear: both;
}

/* Footer styles */
#footer {
  position:relative;
  bottom:0;
  float:left;
  width:100%;
  border-top:1px solid #000;
}
#footer p {
  padding:10px;
  margin:0;
}

Easiest solution would be, to just add a background image to your wrapper

#left_col, #right_col {
  display: inline;
  float: left;
  margin: 0 10px;
  width: 400px;
}

<div id="wrapper">
  <div id="left_col">
    <!--left_col content-->
  </div><!--/left_col-->

  <div id="right_col">
    <!--right_col content-->
  </div><!--/right_col-->
<div style="clear: both"/>
</div><!--/wrapper->

If your code looks like this, just add a y-axis repeating background image to the wrapper.

As far as I know, that is the solution that will produce the least amount of problems.