Як заповнити 100% залишкової висоти?

Question 1

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

Або цей метод помилковий? Як мені це зробити? будь ласка, перегляньте мою демонстрацію та покажіть мою помилку.

Question 2

Ви зможете це зробити, якщо додати в div ( #headerнижче), щоб обернути вміст 1.

Якщо ви плаваєте #header, вміст із нього #someidбуде змушений обтікати його.
Далі ви встановлюєте #headerширину 100%. Це дозволить розширити , щоб заповнити всю ширину контейнера DIV, #full. Це ефективно підштовхне весь #someidвміст нижче, #headerоскільки більше немає місця для обтікання боків.
Нарешті, встановіть #someidвисоту 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став флекс-контейнером, і #someidслід встановити, що його флекс зростає до значення більше ніж 0.

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

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

#someid {
  flex-grow: 1;
}

Question 3

Щоб отримати divвисоту сторінки до 100%, вам також потрібно буде встановити 100% кожного об’єкту в ієрархії над div. наприклад:

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, який я не екстерналізував.

Question 4

Це можна зробити за допомогою таблиць:

<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 {
    height: 100%;
}

Тепер я просто чую гнівні крики натовпу: "О ні, він користується столами! Нагодуй його левам!" Будь ласка, вислухай мене.

На відміну від прийнятої відповіді, яка нічого не робить, окрім того, що контейнер div має повну висоту сторінки, це рішення змушує div # 2 заповнювати залишковий простір, як вимагається у питанні. Якщо вам потрібно, щоб другий div заповнив всю висоту, призначену для нього, це наразі єдиний спосіб це зробити.

Але не соромтеся довести, що я помиляюся, звичайно! CSS завжди кращий.

Question 5

    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>

Розгорніть фрагмент

Question 6

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

Більшість сайтів вже використовують Jquery, і дуже простий приклад (для мого коду):

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

Ви, очевидно, можете замінити вікно та заголовок і дозволити базовій математиці виконати роботу. Особисто я ще не впевнений у гнучкості ...

Question 7

Я додав це для занадто коротких сторінок.

html:

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

css:

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

Question 8

Створіть div, який містить обидва div (full і someid) і встановіть висоту цього div наступним чином:

висота: 100vh;

Висоту вміщуваних div (full та someid) слід встановити на "auto". Це все.

Question 9

Я знаю, що це давнє запитання, але на сьогоднішній день існує надзвичайно проста форма для цього, це CCS Grid, тому дозвольте мені навести divs як приклад:

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

тоді код CSS:

.full{
  width:/*the width you need*/;
  height:/*the height you need*/;
  display:grid;
  grid-template-rows: minmax(100px,auto) 1fr;
 }

І все, другий рядок, scilicet, someide, займе решту висоти через властивість 1fr, а перший div матиме мінімум 100px і максимум що завгодно.

Треба сказати, CSS значно просунувся, щоб полегшити життя програмістам.