Как я могу объединить flexbox и вертикальную прокрутку в полноразмерном приложении?


102

Я хочу использовать полноразмерное приложение с помощью 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 и результатом, чтобы имитировать разную высоту.


Это не то поведение, которое вы ищете? jsfiddle.net/ch7n6/2
cimmanon

2
jsfiddle.net/ch7n6/3 Да! Это. : D Но я не понимаю, зачем мне указывать высоту, чтобы получить эффект. В любом случае установка: height: 1px; работает
José Cabo

Теперь я изменил высоту на минимальную высоту. Намного лучше. Спасибо вам.
Хосе Кабо,

1
@ JoséCabo +1 - хорошая высота трюка: 0, чтобы показать вертикальную прокрутку! Не могли бы вы объяснить, почему это работает?
Danield

1
Вы должны обращаться flex-shrink:0как к верхнему, так и к нижнему колонтитулу.
Saorikido

Ответы:


202

Благодаря https://stackoverflow.com/users/1652962/cimmanon, который дал мне ответ.

Решением является установка высоты вертикального прокручиваемого элемента. Например:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

Элемент будет иметь высоту, потому что flexbox пересчитывает его, если вам не нужна минимальная высота, поэтому вы можете использовать height: 100px;ее точно так же, как:min-height: 100px;

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

Итак, лучшее решение, если вам нужна min-heightвертикальная прокрутка:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

Если вам просто нужна полная вертикальная прокрутка на случай, если для просмотра статьи недостаточно места:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

Окончательный код: http://jsfiddle.net/ch7n6/867/


2
Использование min-heightв Chrome не работает, это как-то влияет на размер нижнего колонтитула. heightОднако использование дает желаемый результат.
phant0m

1
Попробуй поставить ту высоту там, где стоит «авто». Я изучил это и думаю, что это подходящее место. Поэтому вместо использования min-height и height используйте его.
Хосе Кабо

height: 0исправлены некоторые прыжки на 2 пикселя, когда контент переполняется, и когда это не так. Так странно. Спасибо заранее.
ProblemsOfSumit

@Sumit, не могли бы вы представить, с какой проблемой вы столкнулись?
Хосе Кабо,

Я открыл ссылку на скрипку и, похоже, больше не работает в Chrome (работает в Firefox). Полоса прокрутки исчезла. Кто-нибудь знает, как заставить это работать снова?
ставки

60

Редактор спецификаций 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, если у вас нет веской причины сделать что-то более сложное - их легче читать и они охватывают большинство вариантов поведения. вы захотите вызвать.


21

Текущая спецификация говорит это относительно flex: 1 1 auto:

Изменяет размер элемента на основе свойств width/ height, но делает их полностью гибкими, чтобы они занимали все свободное пространство вдоль главной оси. Если все элементы либо flex: auto, flex: initialили flex: none, любое положительное свободное пространство после пунктов были размерных будут распределены равномерно по пунктам , с flex: auto.

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

Мне кажется, что если вы говорите, что высота элемента составляет 100 пикселей, это больше похоже на «предлагаемый» размер, а не на абсолютный. Поскольку ему позволяют сжиматься и расти, он занимает столько места, сколько ему позволено. Вот почему добавление этой строки к вашему «основному» элементу работает: height: 0(или любое другое небольшое число).

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.