Я хочу использовать полноразмерное приложение с помощью flexbox. Я нашел то, что хочу, используя старый модуль макета flexbox ( display: box;
и другие вещи) по этой ссылке: CSS3 Flexbox full-height app and overflow
Это правильное решение для браузеров, которые поддерживают только старую версию свойств CSS flexbox.
Если я хочу попробовать использовать новые свойства flexbox, я попытаюсь использовать второе решение по той же ссылке, указанной как хакерский: использование контейнера с height: 0px;
. Это заставляет показывать вертикальную прокрутку.
Мне это не очень нравится, потому что это вызывает другие проблемы, и это скорее обходной путь, чем решение.
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
#container article {
flex: 1 1 auto;
overflow-y: scroll;
}
#container header {
background-color: gray;
}
#container footer {
background-color: gray;
}
<section id="container" >
<header id="header" >This is a header</header>
<article id="content" >
This is the content that
<br />
With a lot of lines.
<br />
With a lot of lines.
<br />
This is the content that
<br />
With a lot of lines.
<br />
<br />
This is the content that
<br />
With a lot of lines.
<br />
<br />
This is the content that
<br />
With a lot of lines.
<br />
</article>
<footer id="footer" >This is a footer</footer>
</section>
Я также подготовил JSFiddle с базовым примером: http://jsfiddle.net/ch7n6/
Это полноразмерный HTML-сайт, и нижний колонтитул находится внизу из-за свойств flexbox элемента содержимого. Я предлагаю вам перемещать полосу между кодом CSS и результатом, чтобы имитировать разную высоту.
flex-shrink:0
как к верхнему, так и к нижнему колонтитулу.Ответы:
Благодаря https://stackoverflow.com/users/1652962/cimmanon, который дал мне ответ.
Решением является установка высоты вертикального прокручиваемого элемента. Например:
Элемент будет иметь высоту, потому что flexbox пересчитывает его, если вам не нужна минимальная высота, поэтому вы можете использовать
height: 100px;
ее точно так же, как:min-height: 100px;
Итак, лучшее решение, если вам нужна
min-height
вертикальная прокрутка:Если вам просто нужна полная вертикальная прокрутка на случай, если для просмотра статьи недостаточно места:
Окончательный код: http://jsfiddle.net/ch7n6/867/
источник
min-height
в Chrome не работает, это как-то влияет на размер нижнего колонтитула.height
Однако использование дает желаемый результат.height: 0
исправлены некоторые прыжки на 2 пикселя, когда контент переполняется, и когда это не так. Так странно. Спасибо заранее.Редактор спецификаций Flexbox здесь.
Это рекомендуемое использование flexbox, но есть несколько вещей, которые вы должны настроить для наилучшего поведения.
Не используйте префиксы. Flexbox без префикса хорошо поддерживается большинством браузеров. Всегда начинайте с без префикса и добавляйте префиксы только в случае необходимости для его поддержки.
Поскольку ваш верхний и нижний колонтитулы не предназначены для гибкости, они оба должны быть
flex: none;
установлены на них. Прямо сейчас у вас есть похожее поведение из-за некоторых перекрывающихся эффектов, но вы не должны полагаться на это, если вы не хотите случайно запутать себя позже. (По умолчаниюflex:0 1 auto
, они начинаются с их автоматической высоты и могут сжиматься, но не увеличиваться, но они такжеoverflow:visible
по умолчанию, что запускает их значениеmin-height:auto
по умолчанию, чтобы предотвратить их полное сокращение. Если вы когда-либо установите дляoverflow
них, поведениеmin-height:auto
изменений (переключение на ноль, а не на минимальное содержание), и они внезапно будут раздавлены сверхвысоким<article>
элементом.)Вы
<article>
flex
тоже можете упростить - просто установите,flex: 1;
и все будет хорошо. Старайтесь придерживаться общих ценностей в https://drafts.csswg.org/css-flexbox/#flex-common, если у вас нет веской причины сделать что-то более сложное - их легче читать и они охватывают большинство вариантов поведения. вы захотите вызвать.источник
Текущая спецификация говорит это относительно
flex: 1 1 auto
:http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common
Мне кажется, что если вы говорите, что высота элемента составляет 100 пикселей, это больше похоже на «предлагаемый» размер, а не на абсолютный. Поскольку ему позволяют сжиматься и расти, он занимает столько места, сколько ему позволено. Вот почему добавление этой строки к вашему «основному» элементу работает:
height: 0
(или любое другое небольшое число).источник