Хедер контент футер: Как сделать этот макет Header/Content/Footer с помощью CSS?

Содержание

Как сделать этот макет Header/Content/Footer с помощью CSS?

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

Я хотел бы сделать это UI, и каждый из них является div. Высота заголовка составляет 30 пикселей. А нижний колонтитул-30 пикселей. Но я не знаю высоты содержания. Мне нужно использовать пользовательский фрейм для расчета.

Общая высота должна быть 100%.

Могу ли я сделать это в чистом CSS?

css

Поделиться

Источник


DNB5brims    

19 августа 2011 в 14:34

5 ответов

  • Как сделать этот макет Header/Content/Footer/Menu с помощью CSS?

    Я весь день пытался создать такой шаблон сайта в CSS, но безуспешно. Любая помощь будет очень признательна. Заголовок должен быть всегда виден, даже если мы прокручиваем его Высота меню — это размер верхнего колонтитула + содержимого + нижнего колонтитула Содержимое можно прокручивать, а размер…

  • CSS-установить высоту header/footer, с динамическим content..not, работающим на osXsafari/iOSsafari? (jsBin)

    У меня есть это замечательное решение от @RokoC.Buljan , но оно работает только на chrome & firefox..on safari, раздел содержимого не прокручивается, а нижний колонтитул, кажется, прилипает к нижней части содержимого, делая его недоступным.. Есть ли какой-нибудь способ исправить это для…


48

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

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

Пример markup:

<div>
    <header>I'm a 30px tall header</header>
    <main>I'm the main-content filling the void!</main>
    <footer>I'm a 30px tall footer</footer>
</div>

И CSS, чтобы сопровождать его:

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

    /* Direction of the items, can be row or 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>Layout</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>
    <h2>I am a header</h2>
  </header>
  <article>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
    </p>
  </article>
  <footer>
    <h5>I am a footer</h5>
  </footer>
</body>
</html>

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

Поделиться


Jeremy Karlsson    

19 августа 2011 в 14:43


7

Вот как к этому:

Верхний и нижний колонтитулы имеют высоту 30 пикселей.

Нижний колонтитул приклеен к нижней части страницы.

HTML:

<div>
</div>
<div>
</div>
<div>
</div>

CSS:

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

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

Поделиться


Arnaud Le Blanc    

19 августа 2011 в 14:38


3

Немного повозившись, я нашел решение, которое работает в >IE7, Chrome, Firefox:

http://jsfiddle.net/xfXaw/

* {
    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>
    <div>header</div>
    <div>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>footer</div>

Поделиться


acme    

18 октября 2013 в 13:54


3

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

<!DOCTYPE html>

<html>

<head>

<title>Sticky Header and Footer</title>

<style type="text/css">

/* Reset body padding and margins */

body {
    margin:0;

    padding:0;
}

/* Make Header Sticky */

#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 for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/

#container {

    margin:0 auto;

    overflow:auto;

    padding:80px 0;

    width:940px;

}

#content {

}

/* Make Footer Sticky */

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

<!-- BEGIN: Sticky Header -->
<div>

    <div>
        Header Content
    </div>

</div>
<!-- END: Sticky Header -->

<!-- BEGIN: Page Content -->
<div>

    <div>

            content
        <br /><br />
            blah blah blah..
        ...
    </div>

</div>
<!-- END: Page Content -->

<!-- BEGIN: Sticky Footer -->
<div>

    <div>

        Footer Content

    </div>

</div>

<!-- END: Sticky Footer -->

</body>

</html>

Поделиться


Anand    

24 октября 2013 в 05:43


-1

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

CSS

.header{
    height:30px;
}
.Content{
    height: 100%; 
    overflow: auto;
    padding-top: 10px;
    padding-bottom: 40px;
}
.Footer{
    position: relative;
    margin-top: -30px; /* negative value of footer height */
    height: 30px;
    clear:both;
}

HTML

  <body>
    <div>Header</div>
    <div>Content</div>
    <div>Footer</div>
  </body>

Поделиться


atrueresistance    

19 августа 2011 в 14:56

Похожие вопросы:

HTML5 <header> <div> <footer> просто сложены

Я слишком долго боролся с этим. То, что я пытаюсь сделать, — это просто сложить следующее, Как вы бы сложили таблицу с 1 столбцом, 3 строками. Я пытаюсь отказаться от старых методов HTML и CSS для…

Как создать многоразовый шаблон с header/footer/navigation?

Я играл с JSF и у меня есть проект, работающий с header/footer/navigation/content панелями. Однако проект переходит со страницы 1 на страницу 2 и т. д., причем каждая страница имеет свой макет. Как…

Как расположить два дива «header» и «footer» вокруг div » content»

Мне нужно расположить верхний и Нижний колонтитулы соответственно высоте содержимого. Таким образом, верхний и Нижний колонтитулы находятся рядом с содержимым, даже если размер содержимого…

Как сделать этот макет Header/Content/Footer/Menu с помощью CSS?

Я весь день пытался создать такой шаблон сайта в CSS, но безуспешно. Любая помощь будет очень признательна. Заголовок должен быть всегда виден, даже если мы прокручиваем его Высота меню — это размер…

CSS-установить высоту header/footer, с динамическим content..not, работающим на osXsafari/iOSsafari? (jsBin)

У меня есть это замечательное решение от @RokoC.Buljan , но оно работает только на chrome & firefox..on safari, раздел содержимого не прокручивается, а нижний колонтитул, кажется, прилипает к…

Header-footer-content макет с встроенным блоком div, занимающим оставшееся пространство (без поплавка или переполнения: скрыто)

У меня есть (относительно) простой макет с фиксированными верхними и нижними колонтитулами. Содержимое div разделено на два full height divs с display: inline-block; . Левый div используется для…

Header/Content/Footer дивов внутри конкретного дива?

Я чувствую, что это своего рода очень простой вопрос, но я не могу найти хорошего решения Как я могу иметь заголовок: всегда сверху нижний колонтитул: всегда внизу содержание: прямо под заголовком….

W3.CSS как получить стандартный макет header-[left-right]footer?

Я пытаюсь научиться использовать w3.css для структурирования страницы. Первая попытка-получить стандартный макет header/left panel/right-panel/footer. Затем мне придется усложнить проблему вставки…

Как создать этот макет HTML, по CSS?

Я новичок с CSS; поэтому я не хочу использовать фреймворки CSS. Прочитав некоторые вопросы о фиксированном верхнем и Нижнем колонтитулах с CSS (на StackOverflow), я попытался создать макет HTML, как…

Flex header, content, footer layout

В следующем коде я хочу, чтобы раздел содержимого заполнялся до того момента, когда нижний колонтитул попадает в нижнюю часть экрана. EDIT: возможно, мне следовало бы быть немного более ясным с…

Как сделать фиксированный хэдер и футер с помощью CSS Grid

От автора: CSS Grid — это набор свойств, призванных сделать макет проще, чем когда-либо. Как и почти всегда, есть некоторая кривая обучения, но, честно говоря, с Grid будет весело работать, когда вы освоите его. Одна из областей, в которой он хорош — это хэдер и футер. Немного изменив свое мышление, мы можем получить хэдер и футер, которые ведут себя так, как будто они зафиксированы, или имеют такую «липкую» обработку (нет position: sticky, но такой футер занимает нижнюю часть экрана, даже если на странице нет достаточно контента, чтобы сместить его туда).

Давайте реализуем довольно классический HTML-макет, состоящий из хэдера, основного содержимого и футера. Мы сделаем по-настоящему фиксированный футер, который будет оставаться в нижней части области просмотра, когда основное содержимое прокручивается по мере необходимости, а затем обновим его так, чтобы он стал более традиционным липким футером, который остается в нижней части области просмотра, даже если основной контент невелик. Кроме того, чтобы улучшить макет, давайте спроектируем контейнер основного контента так, чтобы он мог либо охватывать всю ширину области просмотра, либо занимать отцентрированную полосу посередине.

Фиксированный футер немного необычен. Футеры обычно создаются так, чтобы они начинались в нижней части области просмотра и при необходимости сдвигались вниз основным контентом. Но фиксированный футер не является чем-то необычным. Чарльз Шваб делает это на своей домашней странице. В любом случае, реализовать это будет весело!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Но прежде чем мы продолжим, взгляните на фиксированный футер, реализованный на сайте Charles Schwab. Неудивительно, что он использует фиксированное позиционирование, что означает, что он имеет жестко заданный размер. Фактически, если мы откроем DevTools, мы сразу увидим это:

body #qq0 {
border-top: 4px solid #133568;
background-color: #eee;
left: 0;
right: 0;
bottom: 0;
height: 40px!important;
}

body #qq0 {

  border-top: 4px solid #133568;

  background-color: #eee;

  left: 0;

  right: 0;

  bottom: 0;

  height: 40px!important;

}

Не только это, но основной контент не скрывается за фиксированным футером, что достигается путем установки жестко закодированных отступов (включая 15 пикселей внизу элемента <footer>), полей (включая 20 пикселей для ul в футере) и даже разрывы строк.

Давайте попробуем осуществить это без каких-либо из этих ограничений.

Базовые стили

Для начала давайте набросаем минимальный пользовательский интерфейс, а затем усовершенствуем сетку, чтобы она соответствовала нашим целям. Ниже приведен CodeSandbox плюс дополнения для последующих шагов, которые приведут нас к конечному результату.

Сначала займемся подготовительной работой. Мы постараемся использовать всю высоту области просмотра, поэтому, когда мы добавим сетку, будет легко разместить футер внизу (и оставить его там). Там должен быть только один элемент внутри body с идентификатором #app, который будет содержать элементы header, main и footer.

body {
margin: 0; /* prevents scrollbars */
}


#app {
height: 100vh;
}

body {

  margin: 0; /* prevents scrollbars */

}




#app {

  height: 100vh;

}

Затем давайте настроим разделы хэдера, основного содержимого и футера, а также сетку, в которой они все будут находиться. Чтобы было ясно, это не будет работать так, как мы хотим, сразу. Это просто для начала, база для строительства.

body {
margin: 0;
}


#app {
height: 100vh;

/* grid container settings */
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
‘header’
‘main’
‘footer’;
}


#app > header {
grid-area: header;
}


#app > main {
grid-area: main;
padding: 15px 5px 10px 5px;
}


#app > footer {
grid-area: footer;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

body {

  margin: 0;

}




#app {

  height: 100vh;

  

  /* grid container settings */

  display: grid;

  grid-template-columns: 1fr;

  grid-template-rows: auto 1fr auto;

  grid-template-areas:

    ‘header’

    ‘main’

    ‘footer’;

}




#app > header {

  grid-area: header;

}




#app > main {

  grid-area: main;

  padding: 15px 5px 10px 5px;

}




#app > footer {

  grid-area: footer;

}

Мы создали простой макет с одним столбцом и шириной 1fr. Если 1fr в новизну для вас, это по существу означает «взять оставшееся пространство», что в данном случае является всей шириной контейнера сетки #app. Мы также определили три строки:

#app {
/* etc. */
grid-template-rows: auto 1fr auto;
/* etc. */
}

#app {

  /* etc. */

  grid-template-rows: auto 1fr auto;

  /* etc. */

}

Первый и третий ряд, которые будут хэдером и футером, соответственно, имеют размер auto, что означает, что они будут занимать столько места, сколько необходимо. Другими словами: нет необходимости в жестко заданных размерах! Это очень важная деталь и прекрасный пример того, как мы получаем выгоду от использования CSS Grid.

В среднем ряду мы разместим наш контент. Мы назначили ему размер 1fr, что, опять же, просто означает, что он занимает все оставшееся пространство от двух других рядов. Если вам интересно, почему мы используем auto, то это потому, что вся сетка охватывает всю высоту области просмотра, поэтому нам нужна одна секция, которая будет увеличиваться и заполнять любое неиспользуемое пространство. Обратите внимание, что у нас нет и нам никогда не понадобится фиксированная высота, поля, отступы или даже разрывы строк! Таковы преимущества при работе с grid!

Может, попробуем какой-нибудь контент?

В Sandbox вы заметите, что я использовал React для создания этой демонстрации, но поскольку это не статья о React, я не буду вдаваться в подробности; React не имеет абсолютно ничего общего с работой над CSS Grid в этом посте. Я использую его только как простой способ перемещаться между разными фрагментами разметки. Если вы ненавидите React, ничего страшного: надеюсь, вы можете проигнорировать его в этом посте.

У нас есть компоненты Header, Main и Footer, которые задают ожидаемо элементы header, main и footer, соответственно. И, конечно же, все это находится внутри контейнера #app. Да, теоретически этот #app должен быть элементом
, если следовать семантике, но мне это всегда казалось странным. Я просто хотел собрать эти детали, пока мы продвигаемся вперед.

Что касается фактического контента, у меня есть разделы Billing и Settings, между которыми вы можете перемещаться в заголовке. Оба они отображают фиктивный статический контент и предназначены только для демонстрации нашего макета в действии. В разделе Settings будет контент, который мы разместим в полосе по центру на странице, а Billing будет охватывать всю страницу.

Вот Sandbox с тем, что у нас есть.

Раздел Billing выглядит хорошо, но раздел Settings смещает футер с экрана. Не только это — если мы прокручиваем вниз, прокручивается вся страница, из-за чего мы теряем хэдер. В некоторых случаях это может быть желательно, но мы хотим, чтобы и хэдер, и футер оставались в поле зрения, поэтому давайте исправим это.

Фиксированный хэдер, фиксированный футер

Когда мы изначально настраивали нашу сетку, мы задали ей высоту 100vh, что составляет всю высоту области просмотра. Затем мы присвоили строкам хэдера и футера автоматическую высоту, а для основного содержимого — высоту 1fr, чтобы занимать оставшееся пространство. К сожалению, когда контент выходит за пределы доступного пространства, он расширяется за пределы области просмотра, выталкивая футер вниз и за пределы поля зрения.

Исправление тривиально: добавление overflow: auto заставит элемент main прокручиваться, при этом элементы header и footer останутся на месте.

#app > main {
grid-area: main;
overflow: auto;
padding: 15px 5px 10px 5px;
}

#app > main {

  grid-area: main;

  overflow: auto;

  padding: 15px 5px 10px 5px;

}

Вот обновленная демонстрация.

Регулируемая ширина основного содержимого

Мы хотим, чтобы элемент main либо занимал всю ширину области просмотра, либо располагался по центру в пространстве 600 пикселей. Вы можете подумать, что мы могли бы просто задать main фиксированную ширину 600 пикселей с автоматическими полями с обеих сторон. Но поскольку это пост о сетке, давайте воспользуемся сеткой Моара. (К тому же, как мы увидим позже, фиксированная ширина в любом случае работать не будет).

Чтобы получить центрированный элемент в 600 пикселей, мы фактически сделаем элемент main контейнером сетки. Правильно, сетка внутри сетки! Вложение сеток — это вполне нормальный подход, и в будущем это станет еще проще, когда подсетка будет официально поддерживаться во всех браузерах. В этом сценарии мы сделаем сетку main с тремя треками столбцов 1fr 600px 1fr или, проще говоря, 600 пикселей посередине, а оставшееся пространство равномерно разделено по сторонам.

#app > main {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 600px 1fr;
}

#app > main {

  display: grid;

  grid-template-rows: 1fr;

  grid-template-columns: 1fr 600px 1fr;

}

Теперь давайте разместим контент в сетке. Все различные модули отображаются в дочернем элементе section. Предположим, что по умолчанию контент будет занимать средний раздел, если у него нет класса .full — в этом случае он будет охватывать всю ширину сетки. Мы не будем использовать именованные области, а вместо этого укажем точные координаты сетки формы [row-start] / [col-start] / [row-end] / [col-end]:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

#app > section {
grid-area: 1 / 2 / 1 / 3;
}


#app > section.full {
grid-area: 1 / 1 / 1 / 4
}

#app > section {

  grid-area: 1 / 2 / 1 / 3;

}




#app > section.full {

  grid-area: 1 / 1 / 1 / 4

}

Вы можете быть удивлены, увидев значение col-end 4, учитывая, что колонок всего три. Это потому, что колонки и ряды задаются линиями сетки. Чтобы нарисовать три колонки сетки, требуется четыре линии сетки.

Наш section всегда будет в первом ряду, который является единственным рядом. По умолчанию он будет охватывать линии колонок от 2 до 3, что дает среднюю колонку, если section не имеет класса .full, в этом случае она будет охватить линии колонок от 1 до 4, то есть все три колонки.

Вот обновленная демонстрация с этим кодом. Это, вероятно, будет хорошо выглядеть, в зависимости от вашего макета CodeSandbox, но проблема все еще остается. Если уменьшить размер экрана до размера менее 600 пикселей, содержимое резко обрезается. На самом деле нам не нужна фиксированная ширина 600 пикселей по середине. Нам нужна ширина до 600 пикселей. Оказывается, у grid есть инструмент как раз для этого: функция minmax(). Мы указываем минимальную ширину и максимальную ширину, и сетка будет вычислять значение, попадающее в этот диапазон. Вот как мы предотвращаем выброс контента из сетки.

Все, что нам нужно сделать, это заменить значение 600px на minmax(0, 600px):

main {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr minmax(0, 600px) 1fr;
}

main {

  display: grid;

  grid-template-rows: 1fr;

  grid-template-columns: 1fr minmax(0, 600px) 1fr;

}

Вот демонстрация готового кода.

Еще один подход: традиционный фиксированный футер

Ранее мы решили не допускать смещения футера с экрана и сделали это, установив для свойства overflow элемента main значение auto.

Но, как мы вкратце отметили, это может быть желательным эффектом. Фактически, это скорее классический «липкий» футер, который решает эту досадную проблему и помещает футер на нижний край области просмотра, когда контент очень короткий.

Как мы могли бы сохранить всю нашу текущую работу, но позволить футеру сдвинуться вниз, вместо того, чтобы он фиксировался внизу контента? Прямо сейчас наш контент находится в сетке с такой структурой HTML:

<div>
<header />
<main>
<section />
</main>
<footer />
</div>

<div>

  <header />

  <main>

    <section />

  </main>

  <footer />

</div>

Где контейнер сетки main, вложенный в контейнер сетки #app, содержит один ряд и три колонки, которые мы используем для размещения содержимого модуля, которое входит в тег section. Изменим код:

<div>
<header />
<main>
<section />
<footer />
</main>
</div>

<div>

  <header />

  <main>

    <section />

    <footer />

  </main>

</div>

И включим footer в сетку элемента main. Мы начнем с обновления родительской сетки #app, чтобы теперь она состояла из двух рядов вместо трех:

#app {
/* same as before */


grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
‘header’
‘main’;
}

#app {

  /* same as before */




  grid-template-columns: 1fr;

  grid-template-rows: auto 1fr;

  grid-template-areas:

    ‘header’

    ‘main’;

}

Всего два ряда, один для заголовка, а другой для всего остального. Теперь давайте обновим сетку внутри элемента main:

#app > main {
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: 1fr minmax(0, 600px) 1fr;
}

#app > main {

  display: grid;

  grid-template-rows: 1fr auto;

  grid-template-columns: 1fr minmax(0, 600px) 1fr;

}

Мы ввели новый ряд с автоматическим размером. Это означает, что теперь у нас есть ряд в 1fr для контента, который содержит section, и ряд auto для футера. Теперь мы размещаем
внутри этой сетки, а не непосредственно в #app:

#app > footer {
grid-area: 2 / 1 / 3 / 4;
}

#app > footer {

  grid-area: 2 / 1 / 3 / 4;

}

Поскольку main — это элемент с прокруткой, и поскольку теперь у этого элемента есть футер, мы достигли желаемого результата! Таким образом, если в main есть содержимое, которое превышает по длине область просмотра, все это будет прокручиваться, и это прокручиваемое содержимое теперь будет включать наш футер, который находится в самом низу экрана, как мы и ожидали.

Вот обновленная демонстрация. Обратите внимание, что футер будет по возможности внизу экрана; в противном случае он будет прокручиваться по мере необходимости.

Я внес несколько других небольших изменений, например, небольшие корректировки отступов здесь и там; у нас не может быть никаких левых или правых отступов в main, потому что footer больше не будет растягиваться от края до края.

Я также внес в последний момент корректировку во время окончательного редактирования элемента section — тот, который мы включили для содержимого с регулируемой шириной. В частности, я установил для него значение display flex, ширину 100%, а для его непосредственного потомка — overflow: auto. Я сделал это для того, чтобы содержимое элемента section могло прокручиваться горизонтально, если оно превышает границу колонки сетки, но без вертикальной прокрутки.

Без этого изменения проделанная нами работа сводилась бы к подходу с фиксированным футером, который мы рассмотрели ранее. Создание гибкого контейнера section заставляет его непосредственный дочерний элемент div, содержащий контент, занимать все доступное вертикальное пространство. И, конечно же, установка для этого дочернего div overflow: auto для включения прокрутки. Если вам интересно, почему я просто не установил для section overflow-x со значением auto и overflow-y со значением visible, что ж, оказывается, что это невозможно.

Мысли напоследок

В этом посте мы не сделали ничего революционного, и уж точно ничего такого, чего нельзя было бы сделать до CSS Grid. Наш контейнер фиксированной ширины main мог бы быть блочным элементом со значением max-width 600px и автоматическими полями слева и справа. Наш фиксированный футер можно было бы сделать с помощью position: fixed (просто убедитесь, что основной контент не пересекается с ним). И, конечно же, существуют различные способы получить более традиционный «липкий футер».

Но CSS Grid предоставляет единый унифицированный механизм компоновки для выполнения всего этого, и работать с ним весело — честно, весело. На самом деле преобразовать футер из фиксированного в липкий я поначалу даже не планировала. Я добавил это в последнюю минуту, потому что подумал, что без этого пост не будет полным. Это было несложно, просто перемещая ряды сетки, как будто собирать блоки лего вместе. И снова эти пользовательские интерфейсы были банальными. Представьте, как ярко засияет сетка в более грандиозных макетах!

Автор: Adam Rackis

Источник: //css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Изображение в header or footer of a worksheet is unclearly printed when the worksheet contains raster content in Excel 2010

Проблемы


Предположим, вы вставляете изображение в header or footer of a Microsoft Excel 2010, русская версия worksheet, and then you add raster content to the page (for example, transparent images or shapes or charts formatted with glow effects, shadow effects, soft edges, 3D content, or ActiveX form controls). При печати нечетким образом печатается изображение в его области.


Решение


Чтобы устранить эту проблему, применим следующее обновление:

2598350 Description of the Excel 2010 hotfix package (Excel-x-none.msp): 26 июня 2012 г.



Сведения о ключе реестра


Важно, чтобы в этом разделе, методе или задаче были представлены действия по изменению реестра. Однако ошибки при изменении реестра могут привести к серьезным проблемам. Поэтому следует точно выполнять приведенные инструкции. Чтобы защитить вас, перед изменением реестра перед его изменением необходимо создать его. Это позволит восстановить реестр в случае возникновения проблем. Чтобы получить дополнительные сведения о том, как создать и восстановить реестр, щелкните номер следующей статьи в базе знаний Майкрософт:

322756 Как создать и восстановить реестр Windows после установки пакета

исправлений. Чтобы мы могли включить исправление, перейдите к разделу «Исправьте это для меня». Если вы хотите самостоятельно включить исправление, перейдите в раздел»Самостоятельноеисправление исправлений».


Помощь в решении проблемы


Чтобы включить исправление автоматически, нажмите кнопку «Исправить» или ссылку. Затем в диалоговом окне «Загрузка файла» нажмите кнопку «Выполнить» и следуйте шагам мастера fix it.

Для Windows 8


Для Windows 7, Windows Vista, Windows XP, Windows Server 2008 или Windows Server 2003





Примечания.

  • Установите исправление, описанное в статье базы знаний Майкрософт 2598350, перед запуском этого решения Fix it.

  • Возможно, мастер доступен только на английском языке. При этом автоматическое исправление подходит для любых языковых версий Windows.

  • Решения по устранению проблем можно скачать на любой компьютер, а затем сохранить их на устройство флэш-памяти или компакт-диск и запустить на нужном компьютере.

  • Мы ценим ваши замечания. Чтобы оставить отзыв или сообщить о проблемах с этим решением, оставьте комментарий в блоге«Fix it for me»или отправьте нам сообщение электронной почты.




Самостоятельное решение проблемы

После установки пакета hotfix выполните следующие действия, чтобы включить этот префикс:

  1. Выберите в меню Пуск элемент Выполнить, введите в поле Открыть команду regedit и нажмите кнопку ОК.

  2. Найдите и выберите следующий подкомай реестра:

    HKEY_CURRENT_USER\Software\Microsoft\Office\14.0\Excel\Options

  3. В меню Правка наведите курсор на пункт Создать, а затем щелкните Параметр DWORD (32 бита).

  4. Введите ForceNativePrinting и нажмите ввод.

  5. В области сведений щелкните правой кнопкой мыши ForceNativePrinting и выберите «Изменить».

  6. В поле Значение введите 1 и нажмите кнопку ОК.

  7. Закройте редактор реестра.


Статус

Корпорация Майкрософт подтверждает наличие этой проблемы в своих продуктах, которые перечислены в разделе «Применяется к».


Как прижать footer к низу окна браузера с помощью CSS.

Задача прижать footer к низу окна браузера – это одна из самых часто встречаемых задач при верстке сайта.

В общем, ситуация следующая: на странице есть 3 области header, content и footer (верхняя часть страницы, содержимое и нижняя часть).

Бывают страницы, в которых содержимое занимает совсем немного места и, в итоге, они начинают выглядеть примерно вот так:

Нижняя часть сайта (footer) прижимается к контенту и внизу страницы остается пустое пространство.

Как избежать этой ситуации? Как прижать footer к низу окна браузера?

В этой заметке хочу поделиться своим опытом в решении этого вопроса.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Итак, имеем следующий HTML-код:

<html>
<head>
 <title>Заголовок страницы</title>
</head>
<body>
<div>
  <p>Содержимое header</p> 
</div>
<div>
 <h2>Заголовок.</h2>
 <p>Пример текста документа</p>
</div>
<div>
 <p>Место copyright.</p>
</div>
</body>
</html>

Теперь посмотрите на код CSS, который позволит решить проблему и прижать footer к низу окна браузера.

* {
margin:0;
}
body {
 height: 100%;
 min-width:900px;
}
html { 
 position:relative; 
 min-height:100%;
}
#container {
 padding-bottom: 100px;/*Примерно 2 размера footer, чтобы он не наезжал на контент при узком окне браузера*/ 
}
#footer {
 height: 50px; 
 background: #f7f7f7;
 position: absolute;
 bottom: 0;
 width: 100%;
}

В общем, теперь страница выглядит вот так:

Эффект достигается за счет задания элементу html минимальной высоты min-height 100% и относительного позиционирования position:relative.

Для элемента body обязательно нужно задать высоту 100%.

Теперь, когда блок footer будет абсолютно позионироваться относительно низа страницы

position: absolute;
bottom: 0;

он встанет как раз в то место, где заканчивается 100% высоты элемента body.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

DIV верстка — Как прижать футер (footer, подвал) к низу экрана в нашем макете сайта

Обновлено 9 января 2021 Просмотров: 50 622 Автор: Дмитрий Петров

  1. Какие проблемы возникли с нашим макетом сайта
  2. Как прижать футер к низу макета сайта
  3. Вставляем распорку и боремся с Internet Explorer

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Продолжаем тему блочной верстки, которая была начата и продолжена в трех предыдущих статьях. В принципе, нам уже удалось создать как двух- , так и трехколоночный макет сайта, и мы даже успели рассмотреть нюансы создания резинового макета.

  1. Основы блочной верстки
  2. Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS
  3. Создаем двухколоночный, трехколоночный и резиновый макеты для сайта

Какие проблемы возникли с нашим макетом сайта

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

В этом случае может получиться так, что футер не будет прижат к низу экрана, а будет располагаться чуть ли не на его середине по высоте, что в большинстве случаев будет выглядеть некрасиво и не эстетично.

Все же, по моему мнению, прижать footer к самому низу макета сайта нужно, и особенно это будет актуально в случае, когда высота страницы получиться меньше, чем высота экрана пользователя. Схематично это можно представить так:

Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:

Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.

Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div>Шапка </div>
<div>Левая колонка Меню Меню Меню Меню</div>
<div>Правая колонка Меню Меню Меню Меню</div>
<div>Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div>
<div>Подвал</div>
</div>
 </body>
</html>

А в файле Style.css были прописаны следующие CSS свойства:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}

Ну, а сам макет выглядел примерно так:

Как прижать футер к низу макета сайта

Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.

Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:

body, html {
margin:0px;
padding:0px;
height: 100%;
}

На внешнем виде это никак пока не отразится, но зато теперь основной блог можно будет растянуться на всю высоту экрана. Т.е. это был своеобразный подготовительный этап.

Основные свойства CSS, при желании, вы можете посмотреть в Уроках CSS. Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:

#maket {
width:300px;
margin:0 auto;
min-height: 100%;
}

Еще я хочу его подсветить (div с). Для этого задам ему рамку с помощью соответствующего свойства Border (тут читайте про рамки в CSS):

#maket {
width:300px;
margin:0 auto;
min-height: 100%;
border: solid 3px black;
}

Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:

Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>

<div>Шапка </div>
<div>Левая колонка Меню Меню Меню Меню</div>
<div>Правая колонка Меню Меню Меню Меню</div>
<div>Содержимое страницы Содержимое страницы Содержимое </div>
</div>
<div>Подвал</div>
 </body>
</html>

Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:

Но опять возникает проблема, ибо для того, чтобы увидеть подвал, теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки).

Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.

Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером для того, чтобы он сместился вверх, на расстояние равное его высоте. При этом контейнер footer наедет на основной и впишется в высоту экрана браузера (т.е. не нужно будет использовать прокрутку для его просмотра).

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

Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:

#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
}

А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:

#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
}

Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):

Вставляем распорку и боремся с Internet Explorer

Но возникает проблема, которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:

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

Т.е. получается, что внизу экрана расположены два блока, перекрывающие друг друга в области подвала.

Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.

Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID (тут читайте про CSS селекторы) с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div>Шапка </div>
<div>Левая колонка Меню Меню Меню Меню</div>
<div>Правая колонка Меню Меню Меню Меню</div>
<div>Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы</div>
<div></div>
</div>
<div>Подвал</div>
 </body>
</html>

А в Style.css пропишем для этого (ID свойство Height, задающее высоту этому контейнеру-распорке равную высоте подвала:

#rasporka {
height: 50px;
}

В результате футер будет прижиматься снизу не к информации, содержащейся в основном контейнере (например, текст в самой высокой колонке), а на равную подвалу по высоте область с контейнером-распоркой, не содержащим никакой информации.

Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):

Как я уже упоминал выше, ширина футера теперь у нас должна задаваться отдельно, т.к. этот контейнер теперь не входит в состав основного. Для этого нужно добавить в CSS файл дополнительные свойства для Footer, позволяющие задать его ширину и выровнять его посередине экрана по горизонтали.

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

Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:

#footer{
background-color:#FFC0FF;
clear:both;
height: 20px;
margin-top:-20px;
width:800px;
margin-left: auto;
margin-right: auto;
}

С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:

Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.

Все это происходит из-за того, что (браузер Internet Explorer 6 не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.

Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:

* html #maket {
height: 100%;
}

Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.

Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:

body, html {
margin:0px;
padding:0px;
height: 100%;
}
* html #maket {
height: 100%;
}
#maket {
width:800px;
margin:0 auto;
min-height: 100%;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
width:800px;
margin-left: auto;
margin-right: auto;
}
#rasporka {
height: 50px;
}

Ну, а окончательный вид Index.html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.

Можете также посмотреть видео «Работа с Html тегом div»:



Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Лучший способ прижать футер используя flexbox

Этот явно «сломанный» макет происходит, когда футер расположен статически в конце тела, но на странице нет большого количества контента. Нет никакой визуальной информации, чтобы можно было в CSS прижать футер, и он остается посередине экрана, оставляя перед собой огромную область пробелов.

В этом кратком учебном пособии мы рассмотрим современный метод построения футеров, как в CSS прижать футер, чтобы он всегда придерживался самого низа страницы.

Разберем наш способ

Чтобы предотвратить эту ошибку, мы будем создавать нашу страницу, используя flexbox — самый продвинутый инструмент, который CSS3 может предложить для построения адаптивных макетов.

Итак, чтобы в CSS прижать футер, flexbox-модель становится самым лучшим вариантом. На нашей простой странице для демонстрации будет заголовок, основной раздел и нижний колонтитул.

<body>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
</body>

Чтобы включить модель flex, мы добавляем display: flex в тело и изменяем направление в столбец (по умолчанию это строка, которая является горизонтальной компоновкой). Кроме того, html и body потребуют 100% высоты с целью заполнения всего экрана.

html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

После этого нужно настроить, какое количество места займет каждый раздел. Мы добились этого благодаря свойству flex, которое объединяет три гибких спецификации в одну:

  • flex-grow — определяет, сколько свободного места в контейнере переходит к элементу;
  • flex-shrink — определяет, насколько будет сокращаться элемент, когда для всего не будет достаточно места;
  • flex-basis — размер для элемента, установленный по умолчанию.

Мы хотим, чтобы наш верхний и нижний блоки занимали такое количества места, какое им нужно, и все остальное было зарезервировано для основного раздела контента. Для такого макета, чтобы через CSS прижать футер (flexbox), все выглядит следующим образом:

header{
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}
.main-content{
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}
footer{
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

Чтобы увидеть эту технику в действии, ознакомьтесь с нашей демонстрационной страницей в конце страницы. Используя большую розовую кнопку, вы можете изменить количество контента, чтобы понаблюдать за тем, как макет адаптируется.

Подводим итоги и делаем выводы

Таким образом, flexbox можно считать отличным союзником при построении макетов с нуля. Все основные браузеры поддерживают его с несколькими незначительными исключениями, поэтому его довольно безопасно использовать во всех проектах IE9+. На сайте вы можете найти ещё один способ, но уже используя только CSS – «Как прижать футер к низу страницы».

Надеемся, наш метод создания закрепленных футеров был вам полезен, вы узнали что-то новое и вам понравилась эта статья. Оставьте нам комментарий, если знаете отличный способ использования flexbox!

HTML тег

Тег <footer> выделяет нижний колонтитул (“подвал”) веб-сайта или раздела. Как правило, в нем размещается информация об авторских правах, контактные данные, ссылки для навигации и т.д.

В пределах одной страницы можно разместить несколько тегов <footer>. К примеру, можно разместить нижний колонтитул внутри тега <article> для хранения относящейся к статье информации (ссылки, сноски, и т.д.).

В нем могут содержаться другие HTML элементы, кроме тегов <footer> и <header>.

Тег <footer> недавно вошел в спецификацию HTML 5, он поддерживается всеми браузерами.

Если в нижнем колонтитуле содержится контактная информация, то ее необходимо размещать в теге <address>.

Синтаксис¶

Содержимое тега пишется между открывающим (<footer>) и закрывающим (</footer>) тегами.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .header {
        height: 40px;
        padding: 20px 20px 0;
        background: #e1e1e1;
      }
      .main-content {
        height: 60vh;
        padding: 20px;
      }
      footer {
        padding: 10px 20px;
        background: #666;
        color: white;
      }
      a {
        color: #00aaff;
      }
    </style>
  </head>
  <body>
    <div>Заголовок / Меню</div>
    <div>
      <h2>Основной контент</h2>
      <p>Это какой-то параграф. </p>
    </div>
    <footer>
      <p>Компания © W3docs. Все права защищены.</p>
    </footer>
  </body>
</html>

Попробуйте сами!

Результат¶

Атрибуты¶

Тег <footer> поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <footer> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <footer>:

Цвет текста внутри тега <footer>:

Стили форматирования текста для тега <footer>:

Другие свойства для тега <footer>:

Как создать div, чтобы заполнить все пространство между верхним и нижним колонтитулами div

Решение Flexbox

Используя гибкий макет, мы можем добиться этого, сохраняя при этом верхний и нижний колонтитулы естественной высоты. И верхний, и нижний колонтитулы будут прикрепляться к верхней и нижней части окна просмотра соответственно (так же, как в собственном мобильном приложении), а основная область содержимого заполнит оставшееся пространство, в то время как любое вертикальное переполнение будет прокручиваться в этой области.

См. JS Fiddle

HTML 

  <тело>
  <заголовок>
    ...
  
  <основной>
    ...