Fixed DIV не охватывается следующими DIV

Question

У меня есть "фиксированный" ДИВ на самом верху моей страницы:

<div id="banner-wrapper"> 
    <div id="banner"></div> 
</div> 

со следующим CSS:

#banner-wrapper { 
width:300px; 
height:500px; 
} 
#banner { 
width:300px; 
height:500px; 
position:fixed; 
top:0; 
left:0; 
background:orange; 
} 

Это "фиксированный" DIV является затем "контент-обертки" DIV:

<div id="content-wrapper"> 
    <div id="content-left"> 
    content left 
    </div> 
    <div id="content-right"> 
    content right or sidebar 
    </div> 
</div> 

со следующими CSS:

#content-wrapper { 
width:300px; 
background:red; 
position:absolute; 
top:500px; 
bottom:0; 
} 
#content-left { 
width:150px; 
float:left; 
} 
#content-right { 
width:150px; 
float:right; 
} 

Проблема, с которой я сталкиваюсь, заключается в том, что DIV «контент-обертка» не полностью охватывает «фиксированный» DIV. Верхняя часть «контент-обертки» охватывает «фиксированный» DIV, а нижняя часть «контент-обертка» становится прозрачной, демонстрируя «фиксированную» DIV внизу.

Я смог решить проблему, предоставив «тело» высоту в CSS. Тем не менее, я не хочу давать «тело» рост, поскольку я не знаю истинной высоты контента и хотел бы, чтобы он оставался гибким. Я также попытался вставить

<div style="clear:both;"></div> 

перед закрывающими тегами, но это не заставляет «обертку содержимого» опуститься.

Это example вопроса о JSFiddle.

Как вы можете видеть, «красная» коробка не доходит до «синего» окна, даже если она установлена ​​в абсолютное, внизу 0. Из того, что я могу сказать, она достигает дна, если она не содержит никаких DIV внутри из этого. Но как только я добавляю DIVs «content-x», он больше не достигает нижней части страницы.

Благодарим за помощь.

Answer 1

Вы можете относительно позиционировать элемент #content-wrapper, а не полностью позиционировать его. Затем вы можете опустить позиционирование top/bottom, и оно будет вести себя так, как ожидалось.

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

Updated Example

Изменить следующее:

#content-wrapper { 
    width: 300px; 
    height: 100%; 
    background: red; 
    position: absolute; 
    top: 500px; 
    bottom: 0; 
} 

к:

#content-wrapper { 
    width: 300px; 
    background: red; 
    position: relative; 
}