Просто проверяю, есть ли способ сделать это в CSS, прежде чем я включу свой Javascript!
В этом примере #fixed div динамически заполняется содержимым, поэтому мы никогда не знаем, насколько большим будет содержимое в этом div.
Начало #absolute div всегда должно отображаться под #fixed div. Div #absolute также динамически заполняется длинным контентом, поэтому пользователь должен иметь возможность прокручивать контент в этом div, независимо от его размера.
Не зная размера #fixed div, есть ли способ использовать только CSS, чтобы мы могли держать начало #absolute div под #fixed div?
XHTML:
<div id="right">
<p>This div is just here to force a scrollbar.</p>
</div>
<div id="fixed">
<p>This div gets filled dynamically with content of varying length</p>
</div>
<div id="absolute">
<p>This div also gets filled dynamically with content of varying length,
and needs to stay underneath the div above.</p>
<p>This div will sometimes get so high that it stretches below the bottom of the page,
and because it's inside a fixed positioned div the user won't be able to read all of its content.</p>
</div>
CSS:
#fixed {
position:fixed;
border:2px solid green;
width:200px;
display:block;
background-color:white;
}
#absolute {
position:absolute;
border:2px solid red;
width:200px;
margin-top:90px;
z-index:-1;
}
#right {
position:absolute;
right:0px;
width:200px;
height:4000px;
border:2px solid blue;
}