Как создать макет заголовка/контента/футера с помощью CSS?

Question

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

 ______________________
|        Header        |
|______________________|
|                      |
|                      |
|        Content       |
|                      |
|                      |
|______________________|
|        Footer        |
|______________________|

У меня есть три блока: заголовок, содержимое и подвал. Высота заголовка и подвала составляет по 30px. Однако я не знаю высоту содержимого, и мне нужно использовать фрейм пользователя для расчетов.

Общая высота интерфейса должна составлять 100%, и я хотел бы узнать, могу ли я реализовать это с помощью чистого CSS?

Буду благодарен за помощь!

Answer 1

Используя flexbox, это легко достигнуть.

Установите для контейнера, содержащего ваши 3 секции, свойство display: flex; и задайте ему высоту 100% или 100vh. Высота контейнера заполнит всю доступную высоту, а display: flex; обеспечит управление всеми дочерними элементами этого контейнера, у которых установлены соответствующие свойства flex (например, flex: 1;).

Пример разметки:

<div class="wrapper">
    <header>Я заголовок высотой 30px</header>
    <main>Я основной контент, заполняющий пустое пространство!</main>
    <footer>Я подвал высотой 30px</footer>
</div>

А вот CSS для этого примера:

.wrapper {
    height: 100vh;
    display: flex;

    /* Направление элементов, может быть row или column */
    flex-direction: column;
}

header,
footer {
    height: 30px;
}

main {
    flex: 1;
}

Вот этот код в действии на Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left

Вы также можете увидеть больше "магии" flexbox здесь: http://philipwalton.github.io/solved-by-flexbox/

Или найти хорошо составленную документацию здесь: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

--[Старый ответ ниже]--

Вот вам это: http://jsfiddle.net/pKvxN/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Макет</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  header {
    height: 30px;
    background: green;
  }
  footer {
    height: 30px;
    background: red;
  }
</style>
</head>
<body>
  <header>
    <h1>Я заголовок</h1>
  </header>
  <article>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
    </p>
  </article>
  <footer>
    <h4>Я подвал</h4>
  </footer>
</body>
</html>

Это работает во всех современных браузерах (FF4+, Chrome, Safari, IE8 и IE9+).

Answer 2

Вот как это можно сделать:

Заголовок и подвал имеют высоту 30 пикселей.

Подвал прикреплен к нижней части страницы.

HTML:

<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

CSS:

#header {
    height: 30px;
}
#footer {
    height: 30px;
    position: absolute;
    bottom: 0;
}
body {
    height: 100%;
    margin-bottom: 30px;
}

Попробуйте это на jsfiddle: http://jsfiddle.net/Usbuw/

Answer 3

Попробуйте это

<!DOCTYPE html>

<html>

<head>

<title>Проблема с "липким" заголовком и нижним колонтитулом</title>

<style type="text/css">

/* Сбрасываем отступы и поля для тела документа */

body {
    margin:0;
    padding:0;
}

/* Делаем заголовок "липким" */

#header_container {
    background:#eee;
    border:1px solid #666;
    height:60px;
    left:0;
    position:fixed;
    width:100%;
    top:0;
}

#header {
    line-height:60px;
    margin:0 auto;
    width:940px;
    text-align:center;
}

/* CSS для контента страницы. Задаем верхний и нижний отступы в 80px, чтобы заголовок и нижний колонтитул не накладывались на контент. */

#container {
    margin:0 auto;
    overflow:auto;
    padding:80px 0;
    width:940px;
}

#content {
    /* Контент страницы */
}

/* Делаем нижний колонтитул "липким" */

#footer_container {
    background:#eee;
    border:1px solid #666;
    bottom:0;
    height:60px;
    left:0;
    position:fixed;
    width:100%;
}

#footer {
    line-height:60px;
    margin:0 auto;
    width:940px;
    text-align:center;
}

</style>

</head>

<body>

<!-- НАЧАЛО: Липкий заголовок -->
<div id="header_container">
    <div id="header">
        Содержимое заголовка
    </div>
</div>
<!-- КОНЕЦ: Липкий заголовок -->

<!-- НАЧАЛО: Контент страницы -->
<div id="container">
    <div id="content">
            контент
        <br /><br />
            blah blah blah..
        ...
    </div>
</div>
<!-- КОНЕЦ: Контент страницы -->

<!-- НАЧАЛО: Липкий нижний колонтитул -->
<div id="footer_container">
    <div id="footer">
        Содержимое нижнего колонтитула
    </div>
</div>
<!-- КОНЕЦ: Липкий нижний колонтитул -->

</body>

</html>

С помощью этого кода вы сможете создать веб-страницу с липким заголовком и нижним колонтитулом, которые всегда будут оставаться на экране при прокрутке содержимого. Убедитесь, что отступы достаточно велики, чтобы избежать наложения на основной контент.

Answer 4

Вот решение, которое работает в большинстве современных браузеров, включая IE7 и выше, Chrome и Firefox:

Вы можете использовать следующий CSS код:

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#header {
    background: red;
}

#content {
    padding-bottom: 50px;
}

#footer {
    height: 50px;
    margin-top: -50px;
    background: green;
}

А вот HTML-разметка:

<div id="wrap">
    <div id="header">header</div>
    <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</div>
</div>
<div id="footer">footer</div>

Суть решения заключается в том, чтобы задать min-height: 100% для контейнера #wrap, а для #footer использовать отрицательный верхний отступ, чтобы он находился внизу страницы. Это позволяет футеру "прикрепляться" к нижней части экрана, даже если контента недостаточно, чтобы заполнить страницу.

Answer 5

Ваш код создает контейнер с использованием CSS Grid, который включает три основных секции: заголовок (header), основной контент (content) и подвал (footer). Вот разбор вашего решения:

HTML

<div class='container'>
 <header>header</header>
 <div>content</div>
 <footer>footer</footer>
</div>

В этом HTML-коде вы создаете три элемента: заголовок, основной контент и подвал, помещая их внутри контейнера с классом container.

CSS

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

Объяснение CSS:

display: grid; — Устанавливает контейнер как сетку (grid), позволяя использовать все возможности CSS Grid Layout.
grid-template-rows: auto 1fr auto; — Определяет, как будут распределяться строки в сетке:
- auto для заголовка — высота строки будет зависеть от содержимого заголовка.
- 1fr для контентной области — это означает, что эта область будет занимать оставшееся пространство в контейнере, пропорционально доступной высоте.
- auto для подвала — высота строки будет зависеть от содержимого подвала.
height: 100vh; — Устанавливает высоту контейнера равной 100% от высоты видимой области (viewport height), что позволяет контейнеру занимать всю высоту экрана.

Результат

В результате у вас будет веб-страница, на которой заголовок находится в верхней части, основной контент занимает оставшееся пространство по центру, а подвал располагается внизу. Это позволяет создать хорошо структурированное и адаптивное макетное решение с использованием CSS Grid.

Если у вас есть дополнительные вопросы или вам требуется помощь с улучшением вашего макета, не стесняйтесь спрашивать!

Как создать макет заголовка/контента/футера с помощью CSS?

5 ответ(ов)

HTML

CSS

Объяснение CSS:

Результат

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных