流體全高立柱，粘腳

我相信這很容易，但我卡住了。流體全高立柱，粘腳

我有一個簡單的演示來說明。

http://www.ttmt.org.uk/forum/

它是一個容器寬度的最大寬度（流體）。

右欄是設定寬度，但左欄是流體，頁腳粘在底部。

我只是需要延長左邊的列（黃色）的高度，所以它是100％，倒是頁腳

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Title of the document</title> 

     <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"> 

     <style type="text/css"> 
     /*--stickyFooter--*/ 
     html, body { 
      height: 100%; 
     } 

     #wrap { 
      min-height: 100%; 
      max-width:1000px; 
      margin:0 auto; 
      border-left:20px solid white; 
      border-right:20px solid white; 
     } 

     #main { 
      overflow:auto; 
      padding-bottom: 150px;/* must be same height as the footer */ 
      height:100%; 
      min-height:100%; 
     } 

     footer { 
      position: relative; 
      margin:-150px auto 0 auto; 
      height: 150px; 
      clear:both; 
      max-width:1000px; 
      background:red; 
      border-left:20px solid white; 
      border-right:20px solid white; 
     } 

     body:before {/*Opera Fix*/ 
      content:""; 
      height:100%; 
      float:left; 
      width:0; 
      margin-top:-32767px;/ 
     } 
     /*--END-stickyFooter--*/ 

     header{ 
      height:100px; 
      background:#ddd; 
     } 
     #rightCol{ 
      height:100px; 
      background:#eee; 
      width:200px; 
      float:left; 
     } 
     #leftCol{ 
      margin-left:210px; 
      background:yellow; 
      height:auto; 
      height:100%; 
     } 
     </style> 

     </head> 

    <body> 

     <div id="wrap"> 

     <header> 
      <h2>Header</h2> 
     </header> 

     <div id="main"> 
      <div id="rightCol"> 
      <h2>Right Col</h2> 
      </div><!-- #rightCol --> 
      <div id="leftCol"> 
      <h2>Left Col</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </div><!-- #leftCol --> 
     </div> 

     </div><!--wrap--> 

     <footer> 
     <div id="footer-container"> 
      <h2>Footer</h2> 
     </div><!-- #footer-container --> 
     </footer> 

    </body> 

    </html>

來源

2013-03-06 ttmt

可以實現流體高度與jQuery。 – Monkviper 2013-03-06 11:55:40

想試試嗎？我可以爲你寫代碼！ – Monkviper 2013-03-06 12:04:42

我可以嘗試，但我希望有一個CSS解決方案 – ttmt 2013-03-06 12:08:35

讓我們試試這個：

#leftCol { 
position: absolute; 
width: 789px; 
}

來源

2013-03-06 12:14:40 Monkviper

沒有做任何事情對不起 – ttmt 2013-03-06 12:38:18

流體全高立柱，粘腳

回答

相關問題