2列布局，粘腳頁腳

我無法讓頁腳佈局正確地粘貼到頁面底部。我遵循了所有常見的建議，但我的專欄似乎超出了它的容器div，從而將頁腳從頁面底部推出。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"> 
    <head> 
     <style> 
      html, body{ 
       margin:0; 
       height: 100%; 
       padding: 0; 
       border: 0; 
       overflow:inherit; /* triggers 100% height in Opera 9.5 */ 
       font-family: proxima-nova, 'Proxima Nova', gotham, 'helvetica neue', helvetica, arial, sans-serif, sans; 
      } 

      body{ 
       background-color: burlywood; 
      } 

      #wrapper 
      { 
       background-color: #FFFFFF; 
       min-height:100%; /* gives layout 100% height */ 
       width: 980px; 
       margin:0 auto; 
       margin-top: -105px; /* must equals the footer's height' */ 
      } 

      * html #wrapper { 
       height:100%; /* IE6 treats height as min-height */ 
      } 

      div.margin{ 
       width: 920px; /* + 2*30(the padding) */ 
       margin-right:auto; 
       margin-left:auto; 
       padding: 0px 30px 0px 30px; 
      } 

      div.header{ 
       height: 60px; 
       background-color:cornflowerblue; 
      } 

      div.footer{ 
       position: relative; 
       clear:both; 
       height: 105px; 
       background-color:#4E8084; 
      } 

      div.body_content{ 
       display: table; 
       background-color: red; 
       height: 100%; 
      } 

      div.leftSide{ 
       width:25%; 
       background-color: #F4F4F4; 
       display: table-cell; 
      } 

      div.rightSide{ 
       width: 70%; 
       padding: 20px; 
       background-color: #e8e7e7; 
       display: table-cell; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <!-- Fixing wrapper div. the height must equal the footer's height--> 
      <div style="height: 105px;"></div> 

      <div class="header margin"> 
       Welcome 
      </div> 
      <div class="body_content" style="clear: both;"> 
       <div class="leftSide"> 
        <h2>Settings</h2> 
        <a href="#" id="personalButton" class="current">Personal</a> 
        <a href="#" id="securityButton">Security</a> 
       </div> 
       <div class="rightSide"> 
        <h3>Title</h3> 
        <a class="m-btn blue-stripe">Save Changes</a> 
       </div> 
      </div> 
     </div><!-- end #wrapper --> 
     <div class="footer margin" > 
      <span class="footer_links"> 
       something 
      </span> 
     </div> 
    </body> 
</html>

來源

2012-10-27 nullException

解決這個問題有些複雜。可以使用display : table,display : table-row和display : table-cell來解決。當文檔完成時，我會建議你使用下面的jquery。

function resize() { 
     var h = $('#wrapper').outerHeight(true) - $('.header').outerHeight(true); 
     $('.body_content').height(h); 
}

JSFiddle

來源

2012-10-27 10:36:29 sinanakyazici

2列布局，粘腳頁腳

回答

相關問題