CSS，具有动态内容的固定位置 Div - 如何在其下方放置另一个 Div？

发布于 2024-11-16 21:02:23 字数 1443 浏览 2 评论 0原文

在我使用 Javascript 之前，先检查一下 CSS 中是否有办法做到这一点！

在示例中，#fixed div 动态填充内容 - 因此我们永远不知道该 div 中的内容有多大。

#absolute div 的开头必须始终呈现在 #fixed div 下方。 #absolute div 也会动态地填充冗长的内容，因此用户必须能够滚动该 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;
}

原文

Just checking to see whether there's a way to do this in CSS before I get my Javascript on!

In the example, the #fixed div gets filled with content dynamically - so we never know how big the content in that div will be.

The beginning of the #absolute div must always be rendered underneath the #fixed div. The #absolute div also gets filled with lengthy content dynamically, so the user must be able to scroll the content in that div, no matter how big it gets.

Without knowing the size of the #fixed div, is there a way using only CSS that we can keep the beginning of the #absolute div underneath the #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;
}

分享到QQ

分享到微博