Получите div, чтобы принять 100% рост, минус заголовок автоматической высоты [дубликат]

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

См. также: A хороший список лучших практик

Я бы добавил, очень важно, хорошо использовать модификатор final. Использование "окончательной" модификатор, когда это применимо в Java

Сводка:

  1. Используйте модификатор final для обеспечения хорошей инициализации.
  2. Избегайте возврата null в методы, например, при возврате пустых коллекций.
  3. Использовать аннотации @NotNull и @Nullable
  4. Быстрое завершение работы и использование утверждений, чтобы избежать распространения нулевых объектов через все приложение, когда они не должен быть пустым.
  5. Сначала используйте значения с известным объектом: if("knownObject".equals(unknownObject)
  6. Предпочитают valueOf() поверх toString ().
  7. Используйте null safe StringUtils StringUtils.isEmpty(null).

1407
задан rav_kr 15 July 2015 в 15:37
поделиться

30 ответов

2015 update: подход flexbox

Есть два других ответа, кратко упомянувших flexbox ; однако это было более двух лет назад, и они не приводят никаких примеров. Спецификация для flexbox определенно решена.

Примечание. Хотя спецификация компоновки CSS Flexible Boxes находится на этапе рекомендации кандидата, не все браузеры ее реализовали. Реализация WebKit должна иметь префикс -webkit-; Internet Explorer реализует старую версию спецификации, с префиксом -ms-; В Opera 12.10 реализована последняя версия спецификации, без изменений. См. Таблицу совместимости каждого свойства для актуального состояния совместимости.

(взято из https://developer.mozilla.org/en-US/docs/Web/Guide/ CSS / Flexible_boxes )

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

Чтобы проверить текущую поддержку, вы также можете увидеть здесь: http://caniuse.com/#feat=flexbox

Рабочий пример

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

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

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

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

676
ответ дан Michael Scheper 19 August 2018 в 13:44
поделиться
  • 1
    Почему атрибут flex: 0 1 30px; в box .row, поскольку он переопределяется в каждом div? – Erdal G. 15 November 2015 в 10:36
  • 2
    Вот поддержка браузера для flexbox - приятно видеть все эти зеленые - caniuse.com/#feat=flexbox – Brian Burns 10 May 2016 в 18:40
  • 3
    Определенно, это очень хороший подход, и он почти работает;) Существует небольшая проблема, когда содержание div.content превышает оригинальную высоту. В текущей реализации "нижний колонтитул" будет ниже, и это не то, что ожидаются разработчики;) Поэтому я сделал очень легкое исправление. jsfiddle.net/przemcio/xLhLuzf9/3 Я добавил additioal flex на прокрутку контейнера и переполнения. – przemcio 13 July 2016 в 21:55
  • 4
    @przemcio хорошая точка, но я не думаю, что прокручиваемый контент - это то, что ожидает каждый разработчик;) - вам нужно только добавить overflow-y: auto в .row.content, чтобы достичь того, что вам нужно. – Pebbl 1 October 2016 в 11:51
  • 5
    Кажется работать, если вы ставите 100vh на .box. – Steve Bennett 30 November 2017 в 02:36

Как насчет того, что вы просто используете vh, что означает view height в CSS ...

Посмотрите на фрагмент кода, который я создал для вас ниже, и запустите его:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

Кроме того, посмотрите изображение ниже, которое я создал для вас:

18
ответ дан Alireza 19 August 2018 в 13:44
поделиться
  • 1
    Это хорошо, если вы хотите, чтобы div занимал всю высоту окна. Теперь поместите над ним заголовок div с неизвестной высотой. – LarryBud 9 March 2018 в 02:53
  • 2
    @LarryBud вы правы, это делает оболочку div, поэтому все должно идти внутри этого div ... – Alireza 9 March 2018 в 03:42

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

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

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

Я использую угловые и хочу, чтобы размеры моего компонента составляли 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>
1
ответ дан Anthony Brenelière 19 August 2018 в 13:44
поделиться

Оригинальный пост более 3 лет назад. Я думаю, что многие люди, которые приходят на этот пост, как я, ищут приложение, подобное макету, скажем, как-то фиксированный заголовок, нижний колонтитул и полный контент занимают все остальное. Если это так, это сообщение может помочь, оно работает на IE7 + и т. Д.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a / css-trick-to-make-it-easy /

И вот некоторые фрагменты из этого сообщения:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>

153
ответ дан Cursor 19 August 2018 в 13:44
поделиться
  • 1
    Есть только одна проблема с этим: верхний и нижний колонтитулы не являются автоматическими. Это - реальная трудность, а , что , почему «это невозможно». ответ в настоящее время наверху ... – Roman Starkov 4 March 2012 в 19:16
  • 2
    Даже если это не решение исходной проблемы, это помогло мне - так спасибо вам в любом случае :) – Luke Sampson 6 September 2012 в 11:46
  • 3
    Мне нужен заголовок 55px и div, который заполняет остальную часть высоты документа. это решение! – Matías Cánepa 11 September 2012 в 01:46
  • 4
    Ты бомба, я так долго пробовал, и это единственное решение, которое я нашел. Мне нужно, чтобы мой элемент навигации был высотой 60 пикселей в верхней части экрана, а остальная часть - 100%, и это решило. – Adam Waite 7 January 2013 в 12:07
  • 5
    .col не используется, не так ли? – slartidan 2 November 2015 в 13:34

CSS3 Simple Way

height: calc(100% - 10px); // 10px is height of your first div...

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

19
ответ дан dev.meghraj 19 August 2018 в 13:44
поделиться

Сейчас есть тонна ответов, но я нашел, используя высоту: 100vh; для работы над элементом div, который должен заполнить все имеющееся вертикальное пространство.

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

div {
    height: 100vh;
}

Поддерживает IE9 и выше: нажмите, чтобы увидеть ссылку

6
ответ дан eylay 19 August 2018 в 13:44
поделиться
  • 1
    Но 100vh звучит как вся высота, а не остаточная высота. Что, если у вас есть заголовок, и вы тогда хотите заполнить остальные – Epirocks 13 March 2018 в 11:05

Для мобильного приложения я использую только 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;
}

Demo - https://jsfiddle.net/u763ck92/

2
ответ дан grinmax 19 August 2018 в 13:44
поделиться

Фактически вы можете использовать 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
ответ дан Hemerson Varela 19 August 2018 в 13:44
поделиться
  • 1
    Хороший ответ, который я поддержал, но, к сожалению, не работает с IE8, который будет продолжаться долгое время. – Vincent McNabb 9 July 2013 в 07:24
  • 2
    Такие приложения, как Gmail, используют Javascript для определения размера, что является лучшим решением для CSS в большинстве случаев. – Vincent McNabb 9 July 2013 в 22:31
  • 3
    Я думаю, что они используют Javascript, потому что нет другого хорошего CSS-решения для кросс-браузера, а не потому, что это лучше. – Amiramix 9 July 2013 в 22:37
  • 4
    @VincentMcNabb Работает в IE8 w3schools.com/cssref/pr_class_display.asp . Просто требуется! Объявление DOCTYPE. Никогда даже не знал о значении таблицы для атрибута display. Холодный раствор. +1 – Govind Rai 25 September 2016 в 05:45

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

3
ответ дан htho 19 August 2018 в 13:44
поделиться

В CSS действительно нет звука, кросс-браузерного способа сделать это. Предполагая, что ваш макет имеет сложности, вам нужно использовать JavaScript для установки высоты элемента. Суть того, что вам нужно сделать, это:

Element Height = Viewport height - element.offset.top - desired bottom margin

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

Кроме того, если ваш контент может быть больше, чем область просмотра, вам необходимо установить переполнение-y для прокрутки.

207
ответ дан Igor 19 August 2018 в 13:44
поделиться
  • 1
    Это то, что я подозревал. Тем не менее, приложение также будет работать с отключенным Javascript, поэтому, я думаю, я просто буду использовать таблицу. – Vincent McNabb 18 September 2008 в 10:22
  • 2
    Винсент, способ встать на свои места. Я искал, чтобы сделать то же самое, и это кажется невозможным с css? Я не уверен, но, несмотря на то, что ни одна из других решений не сделает то, что вы описали. Javascript является единственным, который работает правильно на данный момент. – Travis 4 May 2010 в 21:00
  • 3
    что, если изменяется высота окна – Techsin 17 November 2013 в 10:55
  • 4
    @Techsin использует jquery или любит привязываться к событию изменения размера окна: $ (window) .bind ('resize orientationchange', doResize); – Emeka 26 December 2013 в 17:55
  • 5
    Я имею в виду ... почему мы не используем calc в 2013 году? – kamii 20 February 2014 в 01:21

он никогда не работал для меня иначе, чем с использованием JavaScript, как предлагалось NICCAI в самом первом ответе. Я использую этот подход для масштабирования <div> с помощью Google Maps.

Вот полный пример того, как это сделать (работает в Safari / FireFox / IE / iPhone / Andorid (работает с вращением)):

CSS

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

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

.content {
  height: 100%;
  background-color: green;
}

JS

function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

HTML

<body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>
22
ответ дан Igor Ivancha 19 August 2018 в 13:44
поделиться
  • 1
    Спасибо!!! Я пробовал все ответы, отличные от таблицы, non-flexbox, и это единственный, который работал на 100% правильно. Один вопрос: исходный источник имеет только body-content-wrapper, и кажется, что все работает отлично без двойной оболочки (без каких-либо table-cell s). Есть ли проблема с этим? – Brandon Mintern 8 July 2016 в 14:26
  • 2
    @BrandonMintern Если у вас нет табличных ячеек, он не работает в IE8 и IE9. (См. Комментарий в оригинальной статье.) – John Kurlak 9 July 2016 в 21:50
  • 3
    Да, ячейки также требуются в IE10. К сожалению, в IE10 и ниже высота .body достигает той же высоты, что и на .container. Вертикальная полоса прокрутки все еще находится в правильном месте, но .container заканчивается тем, что растягивается больше, чем мы хотим. Когда он отображается в полноэкранном режиме, нижняя часть .body находится в нижней части экрана. – Brandon Mintern 11 July 2016 в 22:16

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

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

https: // github.com/cssobj/cssobj

DEMO: https://cssobj.github.io/cssobj-demo/

0
ответ дан James Yang 19 August 2018 в 13:44
поделиться
<!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;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

Во всех здравомыслящих браузерах вы можете поместить div «header» перед контентом, как родной брат, и тот же CSS будет работать. Однако IE7- неправильно интерпретирует высоту, если в этом случае float на 100%, поэтому заголовок должен быть в содержимом, как указано выше. Переполнение: автоматически вызовет двойные полосы прокрутки в IE (у которых всегда есть видимая панель прокрутки, но отключена), но без нее содержимое будет зажиматься, если оно переполняется.

12
ответ дан Jerph 19 August 2018 в 13:44
поделиться
  • 1
    Закрыть! Почти то, что я хочу, кроме того, что у меня будут другие вещи, расположенные в div ... т. Е. top: 0; поставит что-то прямо под заголовком. Я снова изменю свой вопрос, потому что вы ответили на него отлично, и все же не то, что я хочу! Я просто скрою переполнение, поскольку содержимое должно соответствовать. – Vincent McNabb 18 September 2008 в 08:50
  • 2
    -1: этот ответ создает div-содержимое, которое охватывает весь экран, а не rest экрана – Casebash 19 May 2011 в 06:44

Я некоторое время боролся с этим и получил следующее:

. Поскольку содержимое DIV легко сделать такой же, как у родителя, но, по-видимому, трудно сделать его родительской высотой минус высота заголовка. Я решил сделать полный контент div div, но поместите его абсолютно в верхнем левом углу, а затем определите прописку для вершины, которая имеет высоту заголовка. Таким образом, содержимое отображается аккуратно под заголовком и заполняет все оставшееся пространство:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}
20
ответ дан Joran Den Houting 19 August 2018 в 13:44
поделиться
  • 1
    Что делать, если вы не знаете высоту заголовка? – Yugal Jindle 17 March 2013 в 09:46
  • 2
    100% чего? Если я попробую это, я получу огромное пустое пространство, и прокрутка начнется. – mlibby 23 November 2013 в 17:44
  • 3
    100% размера видового экрана возможно @mlibby. Если вы также установите html и body на высоту 100%, тогда div может пойти на 100%. Только с одним div, 100% будет относиться к содержимому div. Я не пробовал его с вложенным div. – Jess 18 September 2014 в 02:44
  • 4
    Это означает 100% высоты элемента (добавляется как дополнение элемента), что делает его вдвое больше высоты. Нет уверенности, что он заполнит страницу, и определенно не ответ на вопрос. Может быть, как уже отмечают, фактически заполняет больше, чем окно просмотра. – Martin 1 July 2015 в 10:43
  • 5
    padding-bottom: 100% устанавливает высоту + 100% родительского контейнера width – Romeno 1 June 2016 в 17:24

Почему не так?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

Дает вам html и body (в этом порядке) высоту, а затем просто придаст вашим элементам высоту?

Работает для меня

9
ответ дан Josh Crozier 19 August 2018 в 13:44
поделиться
  • 1
    Дело в том, что если пользователь использует большой экран для просмотра этой страницы, а высота вашего заголовка фиксируется ровно на 100 пикселей, что меньше 40% от текущей высоты, между вашим заголовком и телом будет большой пробел. – Neeson.Z 14 May 2015 в 08:13

Попробуйте

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
4
ответ дан Marc Audet 19 August 2018 в 13:44
поделиться

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

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

Решение выше использует единицы просмотра и flexbox , и поэтому IE10 +, используя старый синтаксис для IE10.

Codepen для воспроизведения с: ссылкой to codepen

Или этот, для тех, кому нужен прокручиваемый основной контейнер в случае переполнения содержимого: ссылка на codepen

11
ответ дан Michael P. Bazos 19 August 2018 в 13:44
поделиться

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

К сожалению, MSIE 9 или lesser не поддерживают это, и вам нужно использовать префикс поставщика для свойства CSS для каждого браузера, кроме Firefox , Надеюсь, что другие производители также скоро снимут префикс.

Другим выбором будет CSS Grid Layout , но это еще меньше поддерживает стабильные версии браузеров. На практике это поддерживает только MSIE 10.

10
ответ дан Mikko Rantalainen 19 August 2018 в 13:44
поделиться

Только CSS Подход (если высота известна / исправлена)

Если вы хотите, чтобы средний элемент пролегал по всей странице по вертикали, вы можете использовать calc() , который введен в CSS3.

Предполагая, что у нас есть фиксированная высота

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}
и footer элементов, и мы хотим, чтобы тэг section занимал всю доступную вертикальную высоту ...

Демо

Предполагаемая разметка

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Итак, ваш CSS должен быть

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}

Итак, что вы делаете, добавляя высоту элементов и вычитая из 100% с помощью функции calc().

Просто убедитесь, что вы используете height: 100%; для родительских элементов.

76
ответ дан Mr. Alien 19 August 2018 в 13:44
поделиться
  • 1
    ОП сказал, что заголовок может быть произвольной высотой. Так что, если вы заранее не знаете высоту, вы не сможете использовать calc :( – Danield 28 April 2014 в 09:20
  • 2
    @Danield Вот почему я упомянул фиксированную высоту :) – Mr. Alien 28 April 2014 в 11:52
  • 3
    Это решение, которое сработало для меня и не требовало от меня перепроектировать мои существующие страницы вокруг flexboxes. Если вы используете LESS, то есть Bootstrap, убедитесь и прочитайте сообщение coderwall о том, как избежать функции calc (), чтобы LESS не обрабатывал его. – jlyonsmith 1 August 2015 в 00:48
  • 4
    Оп сказал: «Это может быть произвольная высота». Произвольные средства, принятые дизайнером, таким образом фиксируются. Это решение, безусловно, самое лучшее. – jck 25 April 2018 в 16:09

Использовано: height: calc(100vh - 110px);

код:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>

37
ответ дан nguyên 19 August 2018 в 13:44
поделиться

Винсент, я снова отвечу, используя ваши новые требования. Поскольку вам не нужно скрывать содержимое, если оно слишком длинное, вам не нужно плавать в заголовке. Просто поместите переполнение, скрытое в тегах html и body, и установите высоту #content на 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>
5
ответ дан pascalhein 19 August 2018 в 13:44
поделиться
  • 1
    Уже думал об этом. Но это тоже не работает. Я просто буду придерживаться table, потому что он работает. Спасибо за обновление, хотя. – Vincent McNabb 18 September 2008 в 19:02

Решение сетки CSS

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

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

4
ответ дан Paulie_D 19 August 2018 в 13:44
поделиться

Вместо использования таблиц в разметке вы можете использовать таблицы CSS.

Пометка

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Релевантно) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 и FIDDLE2

Некоторые преимущества этого метода:

1) Меньшая разметка

2)

3) Поддержка браузера очень хороша: IE8 +, Все современные браузеры и мобильные устройства ( caniuse )

]

Для полноты здесь приведены эквивалентные элементы HTML для свойств css для Модель таблицы CSS

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 
134
ответ дан Ry- 19 August 2018 в 13:44
поделиться
  • 1
    Я просто указал на метод таблиц css . Оказывается, ответ уже был уже в этом ответе. Это the лучшее решение; чистым, элегантным и с использованием точного инструмента точно так, как он был предназначен. Таблицы CSS – Ian Boyd 10 August 2013 в 23:27
  • 2
    Код скрипта не совсем соответствует ответу здесь. Добавление html, body { height: 100%, width: 100% } показалось критическим в моих тестах. – mlibby 23 November 2013 в 18:14
  • 3
    Досадные функции CSS-таблиц точно такие же, как и с обычными таблицами: если содержимое слишком велико, они расширяют ячейку для соответствия. Это означает, что вам все равно необходимо ограничить размер (максимальная высота) или установить высоту кода, если страница динамическая. Я очень скучаю по сеткам Silverlight! :( – Gone Coding 24 February 2014 в 19:32
  • 4
    Вы всегда можете добавить абсолютно помещенный контейнер внутри элемента строки таблицы, а затем установить его ширину и высоту до 100%. Не забудьте также установить положение относительно элемента table-row. – Mike Mellor 13 May 2016 в 16:40
  • 5
    @MikeMellor не работает в IE11, хотя, как кажется, игнорирует relative позиционирование на элементе table-row, поэтому занимает высоту первого позиционированного восходящего, который не является элементом таблицы. – Dwelle 30 August 2016 в 16:32

Это можно сделать исключительно с помощью CSS с помощью vh:

#page 
{
  display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent 
{
  float:left; width:100%; display:block;
}
#content 
{      
float:left; width:100%; height:100%; display:block; overflow:scroll;
}

и HTML

<div id="page">
   <div id="tdcontent">
   </div>
   <div id="content">
   </div>
</div>

Я проверил его, он работает во всех основные браузеры: Chrome, IE и FireFox

24
ответ дан thanksd 19 August 2018 в 13:44
поделиться
  • 1
    Ничего себе, никогда не слышал о vh и vw единицах раньше. Дополнительная информация: snook.ca/archives/html_and_css/vm-vh-units – Steve Bennett 1 April 2015 в 11:30
  • 2
    Ahh, каждый день учится, спасибо за VH и Vw @ormoz – Shekhar Pankaj 19 October 2015 в 12:08
  • 3
    К сожалению, это не поддерживает IE8 :( – Scott 6 January 2016 в 22:01
  • 4
    Я пробовал этот подход, но height: 100% на #content приводил к тому, что его высота соответствовала высоте #page, игнорируя при этом высоту #tdcontent. С большим количеством контента полоса прокрутки выходит за нижнюю часть страницы. – Brandon Mintern 8 July 2016 в 13:44

Я тоже искал ответ для этого. Если вам посчастливилось прицелиться в IE8 и выше, вы можете использовать display:table и соответствующие значения для получения правил рендеринга таблиц с элементами уровня блока, включая div.

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

21
ответ дан TylerH 19 August 2018 в 13:44
поделиться
 style="height:100vh"

решил проблему для меня. В моем случае я применил это к требуемому div

3
ответ дан Zohab Ali 19 August 2018 в 13:44
поделиться

Простое решение с использованием flexbox:

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

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

Образец кодедепа

Альтернативное решение, с div, центрированный в содержимом div

19
ответ дан zok 19 August 2018 в 13:44
поделиться

Отклонение идеи г-на Алиена ...

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

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

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

Использование «минимальной высоты» вместо «высоты» особенно полезно поэтому он может работать с представленным 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));
}

Конечно, математика может быть упрощена, но вы получите идею ...

1
ответ дан Zub 19 August 2018 в 13:44
поделиться

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

HTML:

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.container {
  width: 400px;
  height: 300px;
}
.header {
  background: cyan;
}
.body {
  background: yellow;
  height: 100%;
}
.body-content-outer-wrapper {
  height: 100%;
}
.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}
.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Исходный источник: заполнение оставшейся высоты контейнера при обработке переполнения в CSS

Предварительный просмотр в реальном времени JSFiddle

22
ответ дан Igor Ivancha 19 August 2018 в 13:44
поделиться
  • 1
    Спасибо!!! Я пробовал все ответы, отличные от таблицы, non-flexbox, и это единственный, который работал на 100% правильно. Один вопрос: исходный источник имеет только body-content-wrapper, и кажется, что все работает отлично без двойной оболочки (без каких-либо table-cell s). Есть ли проблема с этим? – Brandon Mintern 8 July 2016 в 14:26
  • 2
    @BrandonMintern Если у вас нет табличных ячеек, он не работает в IE8 и IE9. (См. Комментарий в оригинальной статье.) – John Kurlak 9 July 2016 в 21:50
  • 3
    Да, ячейки также требуются в IE10. К сожалению, в IE10 и ниже высота .body достигает той же высоты, что и на .container. Вертикальная полоса прокрутки все еще находится в правильном месте, но .container заканчивается тем, что растягивается больше, чем мы хотим. Когда он отображается в полноэкранном режиме, нижняя часть .body находится в нижней части экрана. – Brandon Mintern 11 July 2016 в 22:16

Что сработало для меня (с div в другом div, и я предполагаю, что во всех других обстоятельствах) - установить нижнее дополнение на 100%. То есть, добавьте это в свой css / stylesheet:

padding-bottom: 100%;
20
ответ дан Joran Den Houting 19 August 2018 в 13:44
поделиться
  • 1
    100% чего? Если я попробую это, я получу огромное пустое пространство, и прокрутка начнется. – mlibby 23 November 2013 в 17:44
  • 2
    100% размера видового экрана возможно @mlibby. Если вы также установите html и body на высоту 100%, то div может пойти на 100%. Только с одним div, 100% будет относиться к содержимому div. Я не пробовал его с вложенным div. – Jess 18 September 2014 в 02:44
  • 3
    Это означает 100% высоты элемента (добавляется как дополнение элемента), что делает его вдвое больше высоты. Нет уверенности, что он заполнит страницу, и определенно не ответ на вопрос. Может быть, как уже отмечают, фактически заполняет больше, чем окно просмотра. – Martin 1 July 2015 в 10:43
  • 4
    padding-bottom: 100% устанавливает высоту + 100% родительского контейнера width – Romeno 1 June 2016 в 17:24
  • 5
Другие вопросы по тегам:

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