Установка минимальной высоты div в zurb-foundation

Меня только что познакомил с фреймворком Zurb Foundation 4 мой друг. Интересный материал. Но у меня проблема, которую я не могу понять. У меня есть сайт на основе 4 строк (заголовок, панель навигации, контент, нижний колонтитул);

<div class="row siteBase">

   <div class="row siteHeader" id="siteHeader">
     <div class="large-12 c7olumns">
       <h2>Welcome to Foundation</h2>
       <p>This is version 4.1.2.</p>      
     </div>
   </div>

   <div class="row siteNavbar" id="siteNavbar">      
    navbar
   </div>

   <div class="row siteBody" id="siteBody">
    base
   </div>

   <div class="row siteFooter" id="siteFooter">
    footer
   </div>

</div>

вот мой CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%; 
}

.siteBack {
    background-color: #545454;      
}

.siteBase { 
    /*base size and color*/
    width: 1280px;      
    min-height: 100%;
    margin: 0 auto;
    background-color: #f2f2f2;  

    /* exact fit the contents to the border */
    padding-left:15px;
    padding-right:15px;

    /* border size and color */
    border-style: solid;
    border-left-width: 4px;
    border-top-width: 0px;
    border-right-width: 4px;
    border-bottom-width: 0px;
    border-color: #7da500;

    /* add some shadows to the borders */
    -moz-box-shadow: 0 0 10px 5px #272727;
    -webkit-box-shadow: 0 0 10px 5px #272727;
    box-shadow: 0 0 10px 5px #272727;
}

.siteHeader
{
    width: 100%;
    height: 250px;
    background-color: #7da500;
}

.siteNavbar
{
    height: 50px;
    background-color: #1d1d1d;
}

.siteBody
{
    min-height: 100% auto;
    margin: 0 auto;
    background-color: #f2f2f2;  
}

.siteFooter
{
    height: 50px;
    background-color: #7da500;
}

У меня проблема в том, что div sitebody не растянут на 100%. Заголовок и панель навигации имеют фиксированный размер, как и нижний колонтитул. Но я не хочу, чтобы div sitebody занимал оставшееся пространство, чтобы нижний колонтитул всегда располагался в нижней части экрана (как минимум).

Что мне здесь не хватает? Большое спасибо за твою помощь.


html css zurb-foundation
person Obelix    schedule 22.04.2013    source источник
comment
Вы также захотите иметь фиксированную ширину тега body.   -  person Nina    schedule 23.04.2013
comment
Привет Нина, извините за мою запоздалую реакцию, занятые дни. Пробовал установить фиксированный с помощью на теле, не работает. единственное, что происходит, это то, что мой полный макет смещается влево, но нижний колонтитул все еще находится прямо под основанием, а не зависает внизу. тем временем я также попытался создать небольшой js-скрипт, который динамически определяет высоту области просмотра (прямо при загрузке) и указывает минимальную высоту для тела в пикселях. но это тоже не сработало, zurb framework встал между ними :)   -  person Obelix    schedule 06.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

По сути, вам нужно прикрепить нижний колонтитул к нижней части страницы. Таким образом, у вас будет полное тело, даже если ваш основной контент невелик. Вы можете взглянуть на этот SO-вопрос, чтобы увидеть, как он реализован. Там может быть много всего, так как этот макет немного сложен. Поэтому я сделал для вас образец, который вы можете использовать для более простого макета. Вот модифицированный css из другого вопроса SO.

html, body, #wrapper{ height: 100%; }
body > #wrapper{height: auto; min-height: 100%;}
#main { padding-bottom: 75px; /*  same height as the footer */
    overflow:hidden;
    top: 75px; bottom: 0; left: 0; right: 0;            
    background-color:yellow;           
}  
#footer { 
    position: relative;
    margin-top: -75px; /* negative value of footer height */
    height: 75px;
    clear:both;
} 

.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
person von v.    schedule 23.04.2013