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.
加载中,请稍侯......
精彩评论