Макет Святого Грааля с высотой 100%

Я пытаюсь сделать макет CSS, который выглядит следующим образом

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

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

Источник

4 ответа

Решение

В 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>

Источник

Это 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"
     "sidebar"
     "content"
     "sidebar2"
     "footer";
     padding: 0;
     margin: 0;          
}

.wrapper {
    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>

Источник

Посмотрите эту технику сверху / снизу, и просто вставьте в нее боковые панели. Даже работает в IE6:p

Источник

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

Источник

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

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

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

Источник
Другие вопросы по тегам