Высота заполнения родительского div?

Question

Я пытаюсь получить div, чтобы заполнить оставшуюся высоту div. Вот мой HTML и CSS:

CSS:

* { 
    padding: 0px; 
    margin: 0px; 
} 
#container { 
    margin: 85px auto 0px auto; 
    background: #444444; 
    min-height: 500px; 
    width: 900px; 
} 
#topbar { 
    width: 900px; 
    height: 85px; 
    background: #555555; 
} 
#leftbar { 
    width: 250px; 
    height: 100%; 
    background: #666666; 
} 

HTML:

<div id="container"> 
    <div id="topbar"> 
    </div> 
    <div id="leftbar"> 
    </div> 
</div> 

Я ожидал leftbar заполнить высоту между нижней topbar и нижней части container, но это scretching container так что leftbar составляет 100% от высоты страницы.

Answer 1

Вы можете растянуть leftbar с абсолютным позиционированием и установкой top/bottom значения:

* { 
    padding: 0px; 
    margin: 0px; 
} 
#container { 
    position: relative; 
    margin: 85px auto 0px auto; 
    background: #444444; 
    min-height: 500px; 
    width: 900px; 
} 
#topbar { 
    width: 900px; 
    height: 85px; 
    background: #555555; 
} 
#leftbar { 
    position: absolute; 
    top: 85px; 
    bottom: 0; 
    width: 250px; 
    background: red; 
} 

Fiddle: http://jsfiddle.net/robertp/CQ7pf/

Answer 2

Попробуйте добавить это к контейнеру:

position: relative; 

, а затем добавить этот к левому краю:

position: absolute; 
top: 0; 
bottom: 0; 

Answer 3

Установите левую полосу в положение: относительное;

Answer 4

Таким образом, leftbar должно быть container 's высота минус topbar' s высота. Поскольку container и topbar имеют жестко заданные значения высоты, следует, что leftbar также должен быть жестко закодирован. Это не самая красивая вещь в мире, но она проще, чем альтернатива, JavaScript.

Если container составляет 500px в высоту, вычитайте высоту topbar (85) и марку container (85), чтобы достичь высоты 330 пикселей. Поскольку container использует min-height, используйте min-height для leftbar, чтобы он мог растянуть контейнер, если потребуется. Вы также должны поменять leftbar на положение чтобы сделать высоту container.

Итог:

#leftbar { 
position: relative; 
min-height: 330px; 
}