div, чтобы заполнить высоту родительского [duplicate]

Question

div, чтобы заполнить высоту родительского [duplicate]

Мы оказываемся во вселенной, которая, по-видимому, развивается по измерению, которое мы называем «временем». Мы не понимаем, какое время, но мы разработали абстракции и словарный запас, которые позволяют рассуждать и говорить об этом: «прошлое», «настоящее», «будущее», «до», «после».

Компьютерные системы, которые мы строим - все больше и больше - имеют время как важное измерение. В будущем будут созданы определенные вещи. Тогда другие вещи должны произойти после того, как эти первые вещи в конечном итоге произойдут. Это основное понятие, называемое «асинхронность». В нашем мире с более сложной сетью наиболее распространенный случай асинхронности ожидает, что какая-то удаленная система ответит на какой-то запрос.

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

var milk = order_milk();
put_in_coffee(milk);

Поскольку JS не знает, что ему нужно дождаться окончания order_milk, прежде чем он выполнит put_in_coffee. Другими словами, он не знает, что order_milk является асинхронным - это то, что не приведет к молоку до некоторого будущего времени. JS и другие декларативные языки, выполняйте один оператор за другим, не ожидая.

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

order_milk(put_in_coffee);

order_milk запускает, заказывает молоко, тогда, когда и только когда он прибывает, он вызывает put_in_coffee.

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

order_milk(function(milk) { put_in_coffee(milk, drink_coffee); }

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

В этом случае мы могли бы переписать код в вопросе как:

var answer;
$.ajax('/foo.json') . done(function(response) {
  callback(response.data);
});

function callback(data) {
  console.log(data);
}

Enter обещает

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

В случае нашего молока и кофе мы создаем order_milk, чтобы вернуть обещание о прибытии молока, затем укажите put_in_coffee как действие then следующим образом:

order_milk() . then(put_in_coffee)

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

order_milk() . then(put_in_coffee) . then(drink_coffee)

Давайте применим обещания к вашей конкретной проблеме. Мы завершим нашу логику запроса внутри функции, которая возвращает обещание:

function get_data() {
  return $.ajax('/foo.json');
}

На самом деле, все, что мы сделали, добавлено к return к вызову $.ajax. Это работает, потому что jQuery $.ajax уже возвращает вид обетоподобной вещи. (На практике, не вдаваясь в подробности, мы предпочли бы обернуть этот вызов, чтобы вернуть реальное обещание, или использовать некоторую альтернативу $.ajax, которая делает это.) Теперь, если мы хотим загрузить файл и дождаться его завершите, а затем сделайте что-нибудь, мы можем просто сказать

get_data() . then(do_something)

, например,

get_data() . 
  then(function(data) { console.log(data); });

. При использовании обещаний мы заканчиваем передачу множества функций в then, поэтому часто полезно использовать более компактные функции стрелок в стиле ES6:

get_data() . 
  then(data => console.log(data));

Ключевое слово `async`

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

a();
b();

, но если a является асинхронным, с обещаниями мы должны написать

a() . then(b);

Выше, мы сказали: «JS не имеет никакого способа узнать что ему нужно дождаться завершения первого вызова, прежде чем он выполнит второй ». Было бы неплохо, если бы можно было сказать JS? Оказывается, существует ключевое слово await, используемое внутри специального типа функции, называемого функцией «async». Эта функция является частью предстоящей версии ES, но уже доступна в транспилерах, таких как Babel, с учетом правильных настроек. Это позволяет нам просто написать

async function morning_routine() {
  var milk   = await order_milk();
  var coffee = await put_in_coffee(milk);
  await drink(coffee);
}

. В вашем случае вы могли бы написать что-то вроде

async function foo() {
  data = await get_data();
  console.log(data);
}

1347

html css flexbox

задан rav_kr 15 July 2015 в 15:37

30 ответов

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

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

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

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

19

ответ дан Alireza 25 August 2018 в 09:41

1

– LarryBud 9 March 2018 в 02:53
2

– 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 25 August 2018 в 09:41

Оригинальный пост более 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 25 August 2018 в 09:41

1

– Roman Starkov 4 March 2012 в 19:16
2

– Luke Sampson 6 September 2012 в 11:46
3

– Matías Cánepa 11 September 2012 в 01:46
4

– Adam Waite 7 January 2013 в 12:07
5

– slartidan 2 November 2015 в 13:34

CSS3 Simple Way

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

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

20

ответ дан dev.meghraj 25 August 2018 в 09:41

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

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

div {
    height: 100vh;
}

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

6

ответ дан eylay 25 August 2018 в 09:41

1

– 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 25 August 2018 в 09:41

1

– HarshMarshmallow 17 April 2017 в 17:59

Фактически вы можете использовать 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 25 August 2018 в 09:41

1

– Vincent McNabb 9 July 2013 в 07:24
2

– Vincent McNabb 9 July 2013 в 22:31
3

– Amiramix 9 July 2013 в 22:37
4

– Govind Rai 25 September 2016 в 05:45

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

3

ответ дан htho 25 August 2018 в 09:41

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

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

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

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

207

ответ дан Igor 25 August 2018 в 09:41

1

– Vincent McNabb 18 September 2008 в 10:22
2

– Travis 4 May 2010 в 21:00
3

– Techsin 17 November 2013 в 10:55
4

– Emeka 26 December 2013 в 17:55
5

– 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 25 August 2018 в 09:41

1

– Brandon Mintern 8 July 2016 в 14:26
2

– John Kurlak 9 July 2016 в 21:50
3

– 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 25 August 2018 в 09:41

<!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 25 August 2018 в 09:41

1

– Vincent McNabb 18 September 2008 в 08:50
2

– 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 25 August 2018 в 09:41

1

– Yugal Jindle 17 March 2013 в 09:46
2

– mlibby 23 November 2013 в 17:44
3

– Jess 18 September 2014 в 02:44
4

– Martin 1 July 2015 в 10:43
5

– 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 25 August 2018 в 09:41

1

– 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 25 August 2018 в 09:41

Отказ от ответственности: принятый ответ дает идею решения, но я нахожу его немного раздутым с ненужными правилами оболочки и 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 25 August 2018 в 09:41

1

– Naeem Baghi 1 January 2018 в 14:22

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

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

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

10

ответ дан Mikko Rantalainen 25 August 2018 в 09:41

Только 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%; для родительских элементов.

77

ответ дан Mr. Alien 25 August 2018 в 09:41
поделиться

1

– Danield 28 April 2014 в 09:20

2

– Mr. Alien 28 April 2014 в 11:52

3

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

38

ответ дан nguyên 25 August 2018 в 09:41
поделиться

Винсент, я снова отвечу, используя ваши новые требования. Поскольку вам не нужно скрывать содержимое, если оно слишком длинное, вам не нужно плавать в заголовке. Просто поместите переполнение, скрытое в тегах 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 25 August 2018 в 09:41
поделиться

1

– 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 25 August 2018 в 09:41
поделиться

Вместо использования таблиц в разметке вы можете использовать таблицы 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- 25 August 2018 в 09:41
поделиться

1

– Ian Boyd 10 August 2013 в 23:27

2

– mlibby 23 November 2013 в 18:14

3

– Gone Coding 24 February 2014 в 19:32

4

– Mike Mellor 13 May 2016 в 16:40

5

– 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 25 August 2018 в 09:41
поделиться

1

– Steve Bennett 1 April 2015 в 11:30

2

– Shekhar Pankaj 19 October 2015 в 12:08

3

– Scott 6 January 2016 в 22:01

4

– Brandon Mintern 8 July 2016 в 13:44

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

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

21

ответ дан TylerH 25 August 2018 в 09:41
поделиться

style="height:100vh"

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

3

ответ дан Zohab Ali 25 August 2018 в 09:41
поделиться

Простое решение с использованием 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 25 August 2018 в 09:41
поделиться

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

Это кажется более чистым решением, чем популярная гибкая видеокарта для браузеров с поддержкой 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 25 August 2018 в 09:41
поделиться

Ни одно из выпущенных решений не работает, когда вам нужно, чтобы нижний 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 25 August 2018 в 09:41
поделиться

1

– Brandon Mintern 8 July 2016 в 14:26

2

– John Kurlak 9 July 2016 в 21:50

3

– Brandon Mintern 11 July 2016 в 22:16

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

padding-bottom: 100%;

20

ответ дан Joran Den Houting 25 August 2018 в 09:41
поделиться

1

– mlibby 23 November 2013 в 17:44

2

– Jess 18 September 2014 в 02:44

3

– Martin 1 July 2015 в 10:43

4

– Romeno 1 June 2016 в 17:24

Другие вопросы по тегам:
html css flexbox

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

55
Почему бы не использовать таблицы для разметки в HTML? [закрыто] - 6 November 2018 00:07

36
Как сделать div не больше его содержимого? - 20 September 2015 12:27

36
Скрытые функции HTML - 23 May 2017 12:18

31
Как фильтровать данные массива в Javascript в Client [duplicate] - 17 June 2015 03:09

30
Как центрировать эту галерею изображений в лайтбоксе? [Дубликат] - 6 July 2018 20:42

score 678 · Accepted Answer

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


<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 имеет хорошее введение в модель гибких ящиков .

div, чтобы заполнить высоту родительского [duplicate]

Enter обещает

Ключевое слово async

30 ответов

2015 update: подход flexbox

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

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

Пометка

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

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

Ключевое слово `async`