Расширяющаяся середина в CSS

Question

Как бы я разработал веб-сайт с фиксированным верхним и нижним колонтитулами (прикрепленными к верхней и нижней части окна браузера), но с расширяющейся серединой. Полосы прокрутки будут только для середины (оранжевый участок на диаграмме), так что остальная часть страницы никогда не будет нуждаться в прокрутке. Я нарисовал макет ниже, чтобы объяснить более четко.

В идеале это должно быть полностью реализовано в CSS и HTML (без скриптов javascript!). Я довольно далеко справился с этой проблемой, но я не могу заставить оранжевую секцию заполнить оставшееся пространство, когда оно не заполнено (независимо от содержимого), и начать прокрутку, если она переполнена.

Answer 1

I думаю это то, что вы хотите:

Live Demo ( edit )

HTML:

<div id="header">Patrick</div>
<div id="content">..</div>
<div id="footer">Beardmore</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden
}
#header, #content, #footer {
    position: absolute;
    left: 0;
    width: 100%
}
#header {
    top: 0;
    height: 100px;

    background: #ccc
}
#content {
    top: 100px;
    bottom: 100px;
    overflow-y: auto
}
#footer {
    bottom: 0;
    height: 100px;

    background: #ccc
}

Answer 2

Старый вопрос, но flexbox дал нам супер простой способ реализации этого паттерна, знакомый вариант в макете «Святой Грааль»:

body {
  /*set container to vertical (column) flex mode, ensure body is full height*/
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
header, footer {
  /*more or less equivalent to min-height:50px*/
  flex-basis:50px
}
header {
  background-color: #7AEE2D;
}
main {
  background-color: #EBAE30;
  /*tell main section to expand to fill available space, this is same as flex 1; or flex:1 1 auto;*/
  flex-grow:1;
}
footer {
  background-color: #34A4E7;
}

<header>header</header>
<main>main</main>
<footer>footer</footer>

Примечание о синтаксисе: для простоты я использовал здесь «атомарные» свойства CSS flexbox, но в простейшем случае вы, скорее всего, столкнетесь с сокращенным синтаксисом, используя само ключевое слово flex. Значения по умолчанию для 3 свойств, которые можно установить для элементов flex (дочерних элементов контейнера display:flex):

Начальное значение в качестве каждого из свойств сокращения: flex-grow: 0 flex-shrink: 1 flex-base: auto

Используя flex, существует несколько способов составить эти свойства, указав одно, два или три значения, и эти значения могут быть получены с помощью ключевых слов, длины единиц (2px) или безразмерных коэффициентов роста / сжатия 2 , В зависимости от ваших аргументов доступно много разных «перегрузок».

Например, flex-basis:50px могло бы быть flex:50px, flex:0 1 50px, а flex-grow:1 могло бы быть flex 1; или flex:1 1 auto;. Это все еще не так плохо, как некоторые другие сокращения CSS, о которых я могу думать (position, я смотрю на вас). Страница MDN сокращенного синтаксиса содержит более подробную информацию.

Answer 3

Это называется StickyFooter или метод "толчка нижнего колонтитула". Это все в Интернете, но это лучший вариант, который я нашел:

http://ryanfait.com/sticky-footer/