끈적한 바닥 글, 부트 스트랩 및 다중 열 조합

ryan faits sticky footer와 twitter bootstrap의 조합을 사용하는 임. 나는 트위터 부스트랩을 끈적한 푸터로 잘 작동시킬 수는 있지만 멀티 컬럼을 가지고있을 때는 높이를 100 % 설정하여 패널이 바닥 글을 터치하도록합니다.끈적한 바닥 글, 부트 스트랩 및 다중 열 조합

/* style.css */ 

body { 
    background-color: #eeeeee; 
} 

.footer { 
    background-color: #fff; 
} 

#left-panel { 
    height: 100%; 
    background-color:#f00; 
} 

#center-panel { 
    height: 100%; 
    background-color:#ff0; 
} 

#right-panel { 
    height: 100%; 
    background-color:#0ff; 
} 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Test</title> 

<!-- Start Bootstrap CSS and JS --> 
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" type="text/css" /> 
<link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.min.css" type="text/css" /> 

<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script> 
<!-- End Bootstrap CSS and JS --> 

<link rel="stylesheet" href="/css/sticky_footer.css" type="text/css" /> 
<link rel="stylesheet" href="/css/style.css" type="text/css" /> 

<script type="text/javascript" src="/js/script.js"></script> 

</head> 

<body id="index" class="home"> 


<div class="wrapper"> 

     <div class="container" style="min-height:100%"> 

      <div class="row-fluid" style="min-height:100%"> 
       <div class="span3" id="left-panel">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.</div> 
       <div class="span6" id="center-panel">fff</div> 
       <div class="span3" id="right-panel">ffff</div> 
      </div> 

     </div> 

     <div class="push"></div> 

</div> 
<div class="footer"></div> 

</body> 
</html> 

/* sticky_footer.css */ 

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 142px; /* .push must be the same height as .footer */ 
    clear: both; 
} 

/* 

Sticky Footer by Ryan Fait 
http://ryanfait.com/ 

*/

출처

2013-07-17 madphp

AFAIK, JS를 사용하는 경우에만 가능합니다. 너 괜찮 니? –

바람직하지는 않지만, 빠르면 빨리 추측해야합니다. – madphp

확인, 자바 스크립트를 사용하여, 이것은 당신이 필요로하는 무엇을 :

이 열처럼 행동해야하는 각 div에 CSS 클래스 column 추가 에 jQuery를
을 참조를 추가
페이지 끝 부분에 다음 스크립트를 추가하십시오.

$(function(){ 
    setColumnSize(); 

    $(window).resize(function() { setColumnSize(); }); 
}); 

function setColumnSize() { 
    $('.column').css('height', $('.footer').position().top); 
}

기본적으로, 우리는 페이지의 상단에서 바닥 글 거리를 얻는 것을 사용하고있는 컬럼의 높이와. 아주 간단합니다.

출처

2013-07-17 19:23:53

끈적한 바닥 글, 부트 스트랩 및 다중 열 조합

답변

관련 문제