свойство положения css и динамическая высота

Question

Я хочу реализовать 3 DIV внутри контейнера, как строки таблицы

top {height = 100px} / middle {height = dynamic} / bottom {height = 100px}

Теперь вопрос в том, каков наилучший подход для динамического роста среднего div и сохранения правильной структуры.

• Вот что я сделал до сих пор: http://jsfiddle.net/pvPSD/4/

HTML

<div id="notification">
<div id="n-top">
    top
</div>
<div id="n-middle">
    middle<br /><br /><br /><br /><br />middle
</div>
<div id="n-bottom">
    bottom
</div>
</div>

CSS

#notification {
    position:absolute;
    left:10px;
    top:10px;
    width:175px;
    background: yellow;
}

#n-top {
    position:absolute;
    left:0px;
    top:0px;
    width:175px;
    height:50px;
    background: blue;
}

#n-middle {
    position:absolute;
    left:0px;
    top:14px;
    width:175px;
    background: red;
}

#n-bottom {
    position:absolute;
    display:block;
    left:0px;
    bottom:0px;
    width:175px;
    height:50px;
    background: green;
}

Answer 1

Ну, мне кажется (я, возможно, понял, что вы хотите не так.), Что избавление от элементов позиционирования (абсолютных, верхних, левых, нижних) для внутренних элементов div из вашего CSS делает его правильным, независимо от того, насколько великосредний div это.Есть ли какая-то другая причина, по которой вам нужно абсолютное позиционирование на этих внутренних элементах?

Answer 2

Если верх и низ <div> s являются статической высотой, то вы можете установить середину <div> в положение 0,0 с высотой 100% и полем вверху, чтобы соответствовать высоте верха <div> и поле внизу, чтобы соответствовать высоте дна <div>.

Answer 3

Это сработало для меня

#notification {
    position:absolute;
    left:10px;
    top:10px;
    width:175px;
    background: yellow;
}

#n-top {
    position:relative;
    left:0px;
    top:0px;
    width:175px;
    height:50px;
    background: blue;
}

#n-middle {
    position:relative;
    left:0px;
    width:175px;
    background: red;
}

#n-bottom {
    position:relative;
    display:block;
    left:0px;
    bottom:0px;
    width:175px;
    height:50px;
    background: green;
}

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

Надеюсь, это имеет смысл.

Answer 4

Просто поместите верхнее и нижнее поле в среднюю часть, добавьте обертку с положением: относительная и верхняя часть и нижняя часть внутри обертки, с положением: абсолютное и высота равна вашему размеру.