Как сделать основной контент div заполнить высоту экрана с помощью css [дубликат]

этот вопрос уже есть ответ здесь:

  • Сделайте div заполнить высоту оставшегося пространства экрана 31 ответы

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

Я создал простой html-файл, так как я не могу опубликовать всю страницу/css из фактического проекта. С примером кода, даже если тело maincontent заполняет экран, он идет на 40px слишком далеко вниз (причина заголовка I предполагать.)

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

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

кто-нибудь знает ответ?

10 62
javascript html css css3 html5

10 ответов:

  • высота в % не требуется
  • jQuery не требуется

(!) растянуть div с помощью bottom & top:

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

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

103

для этого не требуется 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.

56

существует блок CSS под названием viewport height / viewport width.

пример

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

или 90vh = 90% высоты видового экрана.

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

41

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

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

3

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

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

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

вот пример с абсолютным позиционированием: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%; }

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

1

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

на мой взгляд, самым простым и элегантным решением является использование CSS calc(). К сожалению, этот метод недоступен в ie8 и меньше, а также не доступен в браузерах android и мобильной opera. Если вы используете отдельные методы для этого, однако, вы можете попробовать это: 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);
}

мой вторичное разрешение включает липкий метод нижнего колонтитула и коробк-загрунтовку. Это в основном позволяет элементу тела заполнить 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);
});
1

относительные значения, такие как:высота: 100% будет использовать родительский элемент в HTML как ссылку, чтобы использовать относительные значения по высоте вам нужно будет сделать ваш html и теги тела имели 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/

1

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

Я пробовал много вещей, чтобы достичь того, что вы пытаетесь сделать с чистым 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>

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

0

этот вопрос является дубликатом сделайте 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 выше,гибкий график работы собственность shorthands в flex-grow, flex-shrink и flex-basis свойства для того чтобы установить гибкость деталей гибкого трубопровода. Mozilla есть хорошее введение к гибкой модели коробок.

-7