Сделать div заполнить высоту оставшегося места на экране - PullRequest
Новая
       71

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

1596 голосов
/ 18 сентября 2008

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

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

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

CSS и HTML 

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

Вся высота страницы заполнена, и прокрутка не требуется.

Для чего-либо внутри содержимого div, установка top: 0; поместит его прямо под заголовком. Иногда содержимое будет реальной таблицей с высотой, установленной на 100%. Ввод header внутрь content не позволит этому работать.

Есть ли способ добиться того же эффекта без использования table?

Обновление:

Элементы внутри содержимого div также будут иметь высоту, установленную в процентах. Так что что-то на 100% внутри div заполнит его до дна. Как будет два элемента на 50%.

Обновление 2:

Например, если заголовок занимает 20% высоты экрана, таблица, указанная в 50% внутри #content, займет 40% пространства экрана. Пока единственное, что работает - это завернуть все в таблицу.

Ответы [ 31 ]

6 голосов
/ 04 июля 2017

CSS Grid Solution

Просто определение body с помощью display:grid и grid-template-rows с использованием auto и свойства fr value. 

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

Полное руководство по сеткам @ CSS-Tricks.com

5 голосов
/ 06 июля 2013

На самом деле вы можете использовать display: table, чтобы разделить область на два элемента (заголовок и содержимое), где заголовок может различаться по высоте, а содержимое заполняет оставшееся пространство. Это работает со всей страницей, а также когда область представляет собой просто содержимое другого элемента, расположенного с position, установленным на relative, absolute или fixed. Это будет работать до тех пор, пока родительский элемент имеет ненулевую высоту.

См. Эту скрипку , а также код ниже:

CSS: 

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML: 

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>
5 голосов
/ 18 сентября 2008

Винсент, я отвечу снова, используя ваши новые требования. Поскольку вам не нужно скрывать содержимое, если оно слишком длинное, вам не нужно перемещать заголовок. Просто скрыть переполнение в тегах html и body и установить #content height на 100%. Содержимое всегда будет длиннее, чем область просмотра по высоте заголовка, но оно будет скрыто и не вызовет полос прокрутки. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>
4 голосов
/ 27 апреля 2013

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

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
3 голосов
/ 01 февраля 2017

Для мобильного приложения я использую только VH и VW 

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Демо - https://jsfiddle.net/u763ck92/

3 голосов
/ 14 сентября 2012

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

2 голосов
/ 25 августа 2016

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

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

Я использовал flexbox, но более простым способом, используя только свойства display: flex и flex-direction: row | column :

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

Ключ должен установить размер (в процентах) для всех родителей, чтобы ограничить их размер. В следующем примере высота myapp имеет 100% области просмотра.

Основной компонент имеет 90% области просмотра, потому что верхний и нижний колонтитулы имеют 5%.

Я разместил свой шаблон здесь: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html: 

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>
2 голосов
/ 01 июля 2016

Отбросив идею мистера Чужого ...

Это кажется более чистым решением, чем популярный flex box для браузеров с поддержкой CSS3.

Просто используйте min-height (вместо height) с calc () для блока содержимого.

Функция calc () начинается со 100% и вычитает высоту верхних и нижних колонтитулов (необходимо включить значения отступов)

Использование «min-height» вместо «height» особенно полезно, поэтому оно может работать с визуализированным содержимым javascript и средами JS, такими как Angular2. В противном случае, вычисление не будет сдвигать нижний колонтитул вниз страницы, когда визуализированный контент javascript станет видимым.

Вот простой пример заголовка и нижнего колонтитула, использующих высоту 50px и отступы 20px для обоих.

Html: 

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css: 

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

Конечно, математику можно упростить, но вы поняли ...

0 голосов
/ 18 сентября 2008

Если единственной проблемой является высота, то, похоже, просто работает div: 

<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>

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

0 голосов
/ 13 октября 2016

Это динамическое вычисление пространства экрана напоминания, лучше с использованием Javascript.

Вы можете использовать технологию CSS-IN-JS, как показано ниже: lib:

https://github.com/cssobj/cssobj

ДЕМО: https://cssobj.github.io/cssobj-demo/

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...