Как заполнить 100% оставшейся высоты?

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

Содержание (1), как показано выше, неизвестно, так как оно может увеличиваться или уменьшаться на динамически сгенерированных страницах. Второй div (2), как показано выше, должен заполнить оставшееся пространство.

вот пример моего html

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

CSS...

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

Или этот метод неправильный? Как мне это сделать? см. мою демонстрацию и покажите мне свою ошибку.

ОТВЕТЫ

Ответ 1

Вы должны сделать это, если добавить в div (#header ниже), чтобы обернуть содержимое 1.

  • Если вы плаваете #header, содержимое из #someid будет вынуждено обходить его.

  • Затем вы установите ширину #header на 100%. Это расширит его, чтобы заполнить ширину содержащего div, #full. Это эффективно приведет все содержимое #someid ниже #header, так как больше нет места для обтекания сторон.

  • Наконец, установите #someid height на 100%, это сделает его той же высотой, что и #full.

JSFiddle

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
  height: 100%;
}

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

Обновление

Я думаю, стоит упомянуть, что flexbox хорошо поддерживается в современных браузерах сегодня. CSS может быть изменен, если #full станет контейнером flex, а #someid должен установить, чтобы его flex увеличивался до значения, большего чем 0.

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}

Ответ 2

Чтобы получить высоту от div до 100% на странице, вам нужно будет установить каждый объект в иерархии выше div на 100%. например:

html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }

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

Вот пример, из которого я работаю:

<html style="height:100%">
    <body style="height:100%">
        <div style="height:100%; width: 300px;">
            <div style="height:100%; background:blue;">

            </div>
        </div>
    </body>
</html>

Style - это просто замена CSS, который я не использовал.

Ответ 3

Это можно сделать с помощью таблиц:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr height="0%"><td>
        <div id="full">
            <!--contents of 1 -->
        </div>
    </td></tr>
    <tr><td>
        <div id="someid">
            <!--contents of 2 -->
        </div>
    </td></tr>
</table>

Затем примените css, чтобы сделать someid заполнить оставшееся пространство:

#someid {
    height: 100%;
}

Теперь я могу просто услышать сердитые крики из толпы: "Ой, он использует столы! Покормите его львам!" Пожалуйста, выслушайте меня.

В отличие от принятого ответа, который ничего не делает, за исключением того, что контейнер div равен полной высоте страницы, это решение делает div # 2 заполняющим оставшееся пространство запрошенным в вопросе. Если вам нужно, чтобы второй div заполнил всю высоту, выделенную для него, в настоящее время это единственный способ сделать это.

Но, конечно, не стесняйтесь доказывать, что я ошибаюсь! CSS всегда лучше.

Ответ 4

    html,
    body {
        height: 100%;
    }

    .parent {
        display: flex;
        flex-flow:column;
        height: 100%;
        background: white;
    }

    .child-top {
        flex: 0 1 auto;
        background: pink;
    }

    .child-bottom {
        flex: 1 1 auto;
        background: green;
    }
    <div class="parent">
        <div class="child-top">
          This child has just a bit of content
        </div>
        <div class="child-bottom">
          And this one fills the rest
        </div>
    </div>

Ответ 5

Я знаю, что это поздняя запись, но даже в 2016 году я удивлен полным отсутствием поддержки IE для flex (в настоящее время 11 - это единственная, кто ее поддерживает, и ее основная ошибка в этом http://caniuse.com/#feat=flexbox), который с точки зрения бизнеса невелик! Поэтому я думаю, что до тех пор, пока IE не отключит лучшее решение, и большинство совместимых с кросс-браузером, наверняка, должно быть JS/Jquery?

Большинство сайтов уже используют JQuery и очень простой пример (для моего кода):

$('#auto_height_item').height($(window).height() - $('#header').height());

Очевидно, вы можете заменить окно и заголовок и позволить основной математике выполнить эту работу. Лично я все еще не уверен в гибкости...

Ответ 6

Я добавил это для слишком коротких страниц.

HTML:

<section id="secondary-foot"></section>

CSS

section#secondary-foot {
    height: 100%;
    background-color: #000000;
    position: fixed;
    width: 100%;
}

Ответ 7

Создайте div, который содержит оба divs (full и someid) и задайте высоту этого div следующим образом:

высота: 100vh;

Высота содержащихся divs (full и someid) должна быть установлена на "auto". Все это.

Ответ 8

Если ваши пробелы необходимо точно исправить границы экрана, вы можете попробовать

сделайте большой div с помощью:

top:0; 
bottom:0;
margin:0px auto;

и внутри make 2 div с

height:50%; 
margin:0px auto;

Он очень похож на подход thgaskell, но он более гибкий и совместимый с CSS3. Вы можете попробовать слить и проверить его, чтобы убедиться, что он подходит лучше всего на всех ориентациях и устройствах, которые вам нужны.