У меня есть следующий макет (я использую Метеор):

<template name="headerFooter">
    <div class="container-fluid fill-height">
        {{> header}}

        {{> UI.contentBlock}}

        {{> footer}}
    </div>
</template>

<template name="home">
    {{#headerFooter}}
        <div class="row body-film">
            <div id="newsfeed" class="col-sm-offset-7 col-sm-5 block-film">
                {{#each stories}}
                    <div class="story">...</div>
                {{/each}}
            </div>
        </div>
    {{/headerFooter}}
</template>

и это (актуально)css поддерживая это:

html {
    height: 100%;
}
body {
    min-height: 100%
} 
.fill-height {
    height: 100%;
}

html а такжеbody оба элемента ведут себя как ожидалось. Они заполняют свои области при любом уровне масштабирования или размере.

Тем не менееcontainer-fluid сfill-height добавленный класс не делает работу. Это только завершение контента, а не наполнение до дна. Это проблема, потому что она отвечает за добавлениеbody-film а такжеblock-film на страницу, которые являются просто полупрозрачными фонами, чтобы придать всему этому некоторое цветовое единство.

Вот несколько скриншотов, все с уменьшенной страницей, чтобы содержимое не занимало всю высоту:

Теперь вот это сbody элемент выбран. Как вы можете видеть, это хорошо заполняет родителя.

Ноcontainer-fluid не делает.

Сfill-height Я пробовал обаheight а такжеmin-heightи они выглядят точно так же.

Ваша помощь ценится!

Обновить

Я пробовал все возможные комбинацииmin-height а такжеheight на этих трех элементах, и ничего не работает должным образом.

height на всех трех работает, когда контент слишком мал для области просмотра, но когда контент слишком велик для области просмотра, блок контента переполняется изbody полностью, что означает, что фильмы слишком коротки для этого.

min-height На всех трех, мне кажется, самый логичный путь, но он ломается, когда контент слишком мал. В этом случаеbody элемент не растягивается, чтобы заполнить егоhtml Родитель.

В чем дело!!!!????? Это ошибка в новомШаблонный движок Blaze Meteor использует?

Обновить

Я только что попробовалheight: inherit в моемfill-heightи это тоже не сработало. Я действительно в конце моей веревки. Кажется, это должно быть так просто.

Обновить

Хорошо, у меня есть небольшое изменение, чтобы произойти. С этимless:

.fill-height {
    min-height: 100%;
    height:auto !important; 
    height: 100%; 
}
.body-film {
    .fill-height();
}
.block-film {
    .fill-height();
}

Контейнер-жидкость сейчас полная высота, но неbody-film а такжеblock-film которые используют точно такой же миксин!

Вот скриншот, показывающийrow.body-film, которыйдолжен быть в полный рост, так какcontainer-fluid выше это (поверьте мне на слово,container-fluid теперь растягивается, чтобы заполнить тело).

Обратите внимание, что добавление вручнуюfill-height кhtml объявление строки ничего не изменило, оно ведет себя идентично, как если бы оно просто получало это черезbody-film Mixin.

Почему некоторые элементы вообще не отвечают на все этиmin-height требования?

П.С., я использую Chrome, но этоявляется на машине с Ubuntu, так что я не могу быть уверен, есть ли какие-либо несоответствия.

Ответ

Следующее закончило работать:

html, body {
    height: 100%;
}
.container-fluid {
    height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
    height: 100%;
    overflow-y: auto; // a value of 'scroll' will force scrollbars, even if they aren't necessary. This is cleaner.
    background-color: fadeout(@studio-bar-color, @studio-body-film-trans-delta);
}
.block-film {
    min-height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
    background-color: fadeout(@studio-bar-color, @studio-block-film-trans-delta);   
}

overflow Атрибут был чрезвычайно важным, и до этого он мало что знал. Даваяscroll значение для всего тела (вещь, которая должна была быть в состоянии двигаться вверх и вниз) было ответом, а также предоставление самого внутреннего элемента (block-film)min-height чтобы обеспечить его растяжение, а затем и всех родительских элементов.