Священный грааль с высотой 100%

Я пытаюсь сделать макет css, который выглядит как

Термин CSS для этого типа макета известен как "святой грааль", я думаю. Проблема, с которой я сталкиваюсь, заключается в том, что когда я использую макеты и решения, которые я нахожу в Интернете, я не заставляю их работать должным образом, как я хочу. Я пытаюсь сделать страницу, которая, независимо от содержимого, будет иметь нижний колонтитул внизу браузера и столбцы, простирающиеся до него. До сих пор я видел только страницы, на которых нижний колонтитул помещался там, где заканчивается контент, результатом чего является нижнее поле под нижним колонтитулом.

Если бы кто-нибудь мог помочь мне в этом, было бы очень полезно!

Ответы

Ответ 1

В 2017 году вы можете добиться этого изящного и простого изложения с помощью flexbox:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header {
  flex: 0 0 100px;
  background-color: #C14F4F;
}
main {
  flex: 1;
  display: flex;
  background-color: #699EBD;
}
footer {
  flex: 0 0 40px;
  background-color: #C14F4F;
}
.left, .right {
  flex: 0 2 150px;
  background-color: #C28282;
}
.middle {
  flex:1 1 300px;
}

<header></header>
<main>
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</main>
<footer></footer>

Ответ 2

См. этот метод для верхнего/нижнего уровня и просто вставьте в него боковые панели. Даже работает в IE6: p

Ответ 3

Это 2019 год, а как насчет сетки?

.sidebar {
    grid-area: sidebar;
    background-color: #b98583;
}

.sidebar2 {
    grid-area: sidebar2;
    background-color: #b98583;
}

.content {
    grid-area: content;
    background-color: #749dba;
}

.header {
    grid-area: header;
    background-color: #b45653;
    height: 30px;
}

.footer {
    grid-area: footer;
    background-color: #b45653;
    height: 30px;
}

.wrapper {
    display: grid;
    grid-template-areas:
    "header   header header"
    "sidebar  content sidebar2"
    "footer   footer footer";
    grid-template-columns: 20% 2fr 20%;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.box {
    color: #fff;
    font-size: 80%; 
    text-align: center;
}

<div class="wrapper">
  <div class="box header">header</div>
  <div class="box sidebar">left</div>
  <div class="box sidebar2">right</div>
  <div class="box content">middle</div>
  <div class="box footer">footer</div>
</div>

Ответ 4

Это, по-видимому, в основном делает то, что вам нужно. http://www.savio.no/examples/three-column-layout-6.asp Он использует столбец высотой 100% высоты в дополнение к трем.

Ответ 5

Для двух боковых панелей используйте следующее:

padding-bottom:9999px;
margin-bottom:-9999px;

Это создает "невидимое" содержимое, которое позволяет боковым сторонам растягиваться до конца (а отрицательное поле "нормализует" размеры боковой панели, чтобы вычисления, выполняемые на боковой панели, все еще имели смысл).