Как я могу подогнать div, который может расти, и вызвать его прокрутку

Я пытаюсь сделать этот макет без javascript.

У меня есть родительский div и дочерний div, содержащий контент, который добавляется. Я хочу, чтобы ребенок был выровнен по нижней части родителя и расти вертикально. Я также хочу, чтобы родительский div прокручивал, когда высота дочернего элемента> высота родителя.

Первая часть довольно проста:

#child { position:absolute; bottom: 0 }

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

Родительский div охватывает всю высоту окна браузера (чего я не знаю во время разработки)

Ответ 1

Отредактировано, чтобы показать, что возможно

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

Трюк состоит в том, чтобы сделать прокрутку на дочернем элементе, установив максимальную высоту на 100% (т.е. высоту родителей), а затем нижнюю юстировку ребенка с помощью position:absolute;. Вам нужно только убедиться, что у родителя есть position:relative or absolute.

Вот простой CSS, чтобы заставить его работать:

#parent{
    position:absolute;
    /* these parts are obviously not necessary */
    width:500px;
    top:10px;
    bottom:10px;
}
#child{
    position:absolute;
    bottom:0px;
    right:0px;
    left:0px;
    overflow-y:auto;
    /* this is the key */
    max-height:100%;
}

Это отражено в следующем jsfiddle: http://jsfiddle.net/epgdn/5/ просто изменить размер окна запуска до тех пор, пока ребенок не станет больше родительского и родительского будет прокручиваться соответствующим образом.

Ответ 2

Вы не сможете сделать это только с помощью CSS. Если вы поместите ребенка в top:0, вы будете в порядке, так как страница обрабатывается сверху вниз (так же, как и полосы прокрутки).

body { font-size:1.2em; height:50%; color:#735005; }
div { margin:0; padding:0; }
#parent {
    border:1px solid red;
    height:100%; max-height:400px;
    overflow:auto;
    position:relative;
    width:300px;
    }
#child, #child2 {    /* #child2 is STRICTLY here to illustrate the desired effect */
    border:1px solid blue;
    position:absolute;
    bottom:0;
    }
#child2 { visibility:hidden; top:0; }

  <div id="parent">
     <div id="child">scroll scroll scroll ... scroll scroll scroll scroll</div>
     <div id="child2">scroll scroll scroll ... scroll scroll scroll scroll</div>
  </div>

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