Как сделать основной контент div заполнять высоту экрана css

Так что у меня есть веб-страница с верхним и нижним колонтитулами. Я хочу, чтобы основная часть заполнила 100% страницы (заполняет 100% между нижним колонтитулом и верхним колонтитулом) Мой нижний колонтитул находится в абсолютном положении с нижним: 0. Каждый раз, когда я пытаюсь установить основной корпус на 100% высоты или изменить положение или что-то еще, это также будет переполнять заголовок. Если установить тело в абсолютное положение с помощью top: 40 (поскольку мой заголовок имеет высоту 40px), он просто уйдет на 40px слишком далеко вниз, создав полосу прокрутки.

Я создал простой HTML файл, так как я не могу опубликовать всю страницу /CSS из фактического проекта. В примере кода, несмотря на то, что основное содержимое заполняет экран, оно уходит на 40 пикселей ниже (я полагаю, из-за заголовка).

html,
body {
  margin: 0;
  padding: 0;
}

header {
  height: 40px;
  width: 100%;
  background-color: blue;
}

#maincontent {
  background-color: green;
  height: 100%;
  width: 100%;
}

footer {
  height: 40px;
  width: 100%;
  background-color: grey;
  position: absolute;
  bottom: 0;
}
<html>

<head>
  <title>test</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header></header>
  <div id="maincontent">

  </div>

  <footer></footer>
</body>

</html>

ОТВЕТЫ

Ответ 1

Это не обязательно

  • удалить высоту в%
  • удалить JQuery

Растянуть div с помощью дна & top:

.mainbody{
    position: absolute;
    top: 40px; /* Header Height */
    bottom: 20px; /* Footer Height */
    width: 100%;
}

проверьте мой код: http://jsfiddle.net/aslancods/mW9WF/

или проверьте здесь:

body {
    margin:0;
}

.header {
    height: 40px;
    background-color: red;
}

.mainBody {
    background-color: yellow;
    position: absolute;
    top: 40px;
    bottom: 20px;
    width:100%;
}

.content {
    color:#fff;
}

.footer {
    height: 20px;
    background-color: blue;
    
    position: absolute;
    bottom: 0;
    width:100%;
}
<div class="header" >
    &nbsp;
</div>
<div class="mainBody">
    &nbsp;
    <div class="content" >Hello world</div>
</div>
<div class="footer">
    &nbsp;
</div>

Ответ 2

Нет Javascript, абсолютное позиционирование и фиксированные высоты не требуются для этого.

Здесь весь метод CSS/CSS, который не требует фиксированных высот или абсолютного позиционирования:

CSS

.container { 
  display: table;
}
.content { 
  display: table-row; 
  height: 100%; 
}
.content-body { 
  display: table-cell;
}

HTML

<div class="container">
  <header class="header">
    <p>This is the header</p>
  </header>
  <section class="content">
    <div class="content-body">
      <p>This is the content.</p>
    </div>
  </section>
  <footer class="footer">
    <p>This is the footer.</p>
  </footer>
</div>

Смотрите здесь: http://jsfiddle.net/AzLQY/

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

Ответ 3

Существует единица CSS, называемая шириной/шириной видового экрана.

Пример

.mainbody{height: 100vh;} аналогично html,body{width: 100vw;}

или 90vh = 90% высоты просмотра.

** IE9 + и большинство современных браузеров.

Ответ 4

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

html {
    overflow-y: scroll;
    height: 100%;
    margin: 0px auto;
    padding: 0;
}

body {
    height: 100%;
    margin: 0px auto;
    max-width: 960px;
    min-width: 750px;
    padding: 0;
}
div#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
}

div#wrapper {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

div#pageContent {
    padding-bottom: 60px;
}

div#header {
    width: 100%;
}

А моя страница макета выглядит следующим образом:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title></title>
</head>
<body>
<div id="wrapper">
        <div id="header"></div>
        <div id="pageContent"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

Пример здесь: http://data.nwtresearch.com/

Еще одно замечание: если вы хотите, чтобы фон полной страницы был похож на добавленный код, удалите height: auto !important; из div оболочки: http://jsfiddle.net/mdares/a8VVw/

Ответ 5

Используя top: 40px и bottom: 40px (при условии, что нижний колонтитул также равен 40px) без определенной высоты, вы можете заставить это работать.

.header {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    background-color:red;
}
.mainBody {
    width: 100%;
    top: 40px;
    bottom: 40px;
    position: absolute;
    background-color: gray;
}
.footer {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    background-color: blue;
}

JSFiddle

Ответ 6

Не уверен, что вы делаете после, но я думаю, что понял.

Заголовок - находится в верхней части экрана? Нижний колонтитул - находится внизу экрана? Область содержимого → соответствует пространству между нижним колонтитулом и заголовком?

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

Вот пример с абсолютным позиционированием: http://jsfiddle.net/FMYXY/1/

Разметка:

<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>

CSS:

.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }

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

Ответ 7

Ну, существуют разные реализации для разных браузеров.

На мой взгляд, самым простым и изящным решением является использование CSS calc(). К сожалению, этот метод недоступен в ie8 и менее, а также недоступен в браузерах и мобильных операциях. Однако, если вы используете для этого отдельные методы, вы можете попробовать следующее: http://jsfiddle.net/uRskD/

Разметка:

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

И CSS:

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
    min-height: calc(100% - 40px);
}

Мое вторичное решение включает метод липкого нижнего колонтитула и размер коробки. Это в основном позволяет элементу body заполнить 100% высоты своего родителя и включает вложение в 100% с помощью box-sizing: border-box;. http://jsfiddle.net/uRskD/1/

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#footer {
    background: #f0f;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#body {
    background: #0f0;
    min-height: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
}

Моим третьим методом было бы использовать jQuery для установки минимальной высоты основной области содержимого. http://jsfiddle.net/uRskD/2/

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
}

И JS:

$(function() {
    headerHeight = $('#header').height();
    footerHeight = $('#footer').height();
    windowHeight = $(window).height();
   $('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});

Ответ 8

Относительные значения, такие как: height: 100% будут использовать родительский элемент в HTML как ссылку, для использования относительных значений по высоте вам нужно будет сделать ваши теги html и body 100% такими же:

HTML

<body>
    <div class='content'></div>
</body>

CSS

html, body
{
    height: 100%;
}

.content
{
    background: red;
    width: 100%;
    height: 100%;
}

http://jsfiddle.net/u91Lav16/1/

Ответ 9

Хотя это может показаться легкой проблемой, но на самом деле это не так!

Я пробовал многое для достижения того, что вы пытаетесь сделать с помощью чистого CSS, и все мои попытки были неудачными. Но.. есть возможное решение, если вы используете javascript или jquery!

Предполагая, что у вас есть этот CSS:

#myheader {
    width: 100%;
}
#mybody {
    width: 100%;
}
#myfooter {
    width: 100%;
}

Предполагая, что у вас есть этот HTML-код:

<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>

Попробуйте это с помощью jquery:

<script>
    $(document).ready(function() {
        var windowHeight = $(window).height();/* get the browser visible height on screen */
        var headerHeight = $('#myheader').height();/* get the header visible height on screen */
        var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
        var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
        var newBodyHeight = windowHeight - headerHeight - footerHeight;
        if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
            $('#mybody').height(newBodyHeight);
        }
    });
</script>

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

Ответ 10

Этот вопрос является дубликатом , чтобы div заполнил высоту оставшегося пространства экрана, и правильный ответ - использовать flexbox модель.

Все основные браузеры и IE11+ поддерживают Flexbox. Для IE 10 или более ранних версий или Android 4.3 и более ранних версий вы можете использовать шайбу FlexieJS.

Обратите внимание, насколько просты разметка и CSS. Никаких взломов таблиц или чего-либо еще.

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#body {
  flex: 1;
  border: 1px solid orange;
}

#footer{
  background: lime;
}

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

В приведенном выше CSS свойство flex сокращает свойства flex-grow, flex-shrink и flex-based, чтобы установить гибкость гибких элементов. У Mozilla есть хорошее представление о модели гибких коробок.