Липкий нижний колонтитул, ботстрап и комбинация с несколькими колоннами

Im, используя комбинацию ярких нижних колонтитусов ryan faits и twitter bootstrap. Я могу получить twitter boostrap для работы с липким нижним колонтитулом, но когда у меня многоколоночные, я не могу установить высоту: 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

нормально, с помощью JavaScript, это то, что вам нужно:

Добавить ссылку на JQuery
Добавьте класс CSS column каждому div, который должен действовать как колонна
Добавьте следующий скрипт в начало страницы:

$(function(){ 
    setColumnSize(); 

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

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

В основном, мы получаем расстояние колонтитула от верхней части страницы и использовать это как высота колонн. Довольно просто.

источник

2013-07-17 19:23:53

Липкий нижний колонтитул, ботстрап и комбинация с несколькими колоннами

ответ

Смежные вопросы