끈끈한 바닥 글이있는 2 열 레이아웃

2 열 레이아웃이 페이지 하단에 붙이기 위해 바닥 글을 올바르게 렌더링하는 데 문제가 있습니다. 나는 모든 일반적인 충고를 따랐지만, 필자의 컬럼은 container 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 열 레이아웃

답변

관련 문제