CSS，具有动态内容的固定位置Div-如何在其下放置另一个Div? [英] CSS, a Fixed Position Div with Dynamic Content - How to Position Another Div Underneath it?

问题描述

在我使用Java脚本之前，只需检查一下是否有办法在CSS中完成此操作！

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

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

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

必须始终在#fixed div下显示#absolute div的开头. #absolute div还会动态填充冗长的内容，因此用户必须能够滚动该div中的内容，无论它的大小如何.

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.

在不知道#fixed div大小的情况下，有没有一种方法可以仅使用CSS来将#absolute div的开头保留在#fixed div之下?

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;
}

推荐答案

不知道#fixed的大小 div，有没有办法只使用CSS 我们可以将#绝对div的开头保留在#fixed div之下?

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?

不. CSS无法在这里为您提供帮助.

No. CSS cannot help you here.

absolute/fixed元素是...

从正常流程中完全删除 ([并且对以后的兄弟姐妹没有影响).

removed from the normal flow entirely ([and have] no impact on later siblings).

和:

绝对内容 定位的元素不会四处流动 其他箱子

the contents of an absolutely positioned element do not flow around any other boxes

http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning

这篇关于CSS，具有动态内容的固定位置Div-如何在其下放置另一个Div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！