У меня есть следующий макет (я использую Meteor):
<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, и они выглядят точно так же.
Ваша помощь приветствуется!
Update
Я пытаюсь использовать все возможные комбинации min-height и height для этих трех элементов, и ничего не работает должным образом.
height во всех трех случаях, когда содержимое слишком мало для области просмотра, но когда содержимое слишком велико для области просмотра, блок содержимого полностью переполняется из body, что означает, что фильмы слишком короткие для него.
min-height на всех трех кажется мне самым логичным способом, но он ломается, когда контент слишком мал. В этом случае элемент body не растягивается, чтобы заполнить его родительский html.
Что происходит!!!!????? Это ошибка в новом Blaze templating engine Meteor использует?
Update
Я только что пробовал height: inherit в моем fill-height, и он тоже не работал. Я действительно в конце своей веревки. Кажется, это должно быть так просто.
Update
Хорошо, у меня есть небольшое изменение. С помощью этого less:
.fill-height {
min-height: 100%;
height:auto !important;
height: 100%;
}
.body-film {
.fill-height();
}
.block-film {
.fill-height();
}
контейнер-жидкость теперь имеет полную высоту, но не body-film и block-film, которые используют тот же самый mixin!!
Вот скриншот, показывающий row.body-film, который должен быть полным, так как container-fluid над ним (возьмите мое слово за это, container-fluid теперь растягивается до заполните тело).
Заметьте, что добавление объявления fill-height в html в строке html не изменило ничего, он ведет себя одинаково, как если бы он просто получал это через body-film mixin.
Почему некоторые элементы не отвечают на все эти требования min-height?
P.S., я использую 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, чтобы обеспечить его растяжение и затем все родительские элементы.