css伸展2列聖盃，以滿足頁腳

我相信這是一個普遍的挫折感 - 但我試圖做一個兩欄液體與頁腳在軌道。css伸展2列聖盃，以滿足頁腳

我遇到的問題是我可以讓頁腳粘在底部或列上。我使用這個作爲我的基礎，我只需要它們伸展到頁面底部，填充顏色！

的框架佈局：

<!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>

的CSS - 可能是充滿問題...幫助！？

/* 
    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 { 
    clear: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; 
}

來源

2010-09-21 rybit

這個問題已經存在了嗎？你能提供更多的細節/樣本代碼？ – corroded 2010-09-21 01:55:18

最簡單的解決辦法是，只需添加一個背景圖片您的包裝

#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->

如果您的代碼如下所示，只需在包裝中添加一個y軸重複背景圖像即可。

據我所知，這是解決方案，將產生最少的問題。

來源

2010-09-21 02:12:28

哦，沒有看到你在此期間添加了你的代碼示例。把它照原樣。希望它仍然可以幫助你。 – 2010-09-21 02:12:59

我試圖看看是否有「純」的CSS方式 - 我打算一直重複使用佈局。 – rybit 2010-09-21 02:18:29

純CSS的方式：設置包裝位置：相對，設置較短的位置列：絕對;正確：0; top：0;底部：0; （假設正確的是邊欄並且更短）。正如我剛纔提到的那樣，這會在路上產生一些問題。例如，如果你的右側突然變大，怎麼辦？ – 2010-09-21 07:35:42

css伸展2列聖盃，以滿足頁腳

回答

相關問題