Question

有没有办法让单页网站没有绝对位置？因为当我想要改变容器的高度时，绝对位置有点尴尬。我的意思是当我向一个容器插入更多内容时，另一个容器上面的内容应该向下移动。我尝试过静态和亲戚的位置，但它对我没用。

现在我的css看起来像：

        <style>
        #header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
        #main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
    #about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
    </style>

    <body>
    <div id="header">
    content....
    </div>

    <div id="main">
    content...
    </div>

    <div id="about">
    long content which is covered with next div, because its "top" atribute settings
    </div>

<div id="contact">
div which covers previous one's end
</div>

但是当某个容器需要更长时间时，问题就在这里..

感谢您的帮助！

Answer 1

这取决于您网站的风格。当然你可以设置锚点并有一个单页滚动网站，但我认为这不会回答你的问题。

我的建议是尝试使用绝对定位元素作为容器，并在其中包含您的实际模板。

如果您提供了一些实际的代码或您遇到的具体问题会有所帮助，因为它目前太模糊了。

Answer 2

我会提供一个我认为你可能会问的答案，尽管它并不清楚。我希望这不是太基础。

完全抛弃位置属性。

只需要一个div（默认为100％宽度）作为html顶部的标题。内容应该在另一个div之下。

默认情况下，Div的宽度为100％，其高度取决于其内容的高度。他们将成长以适应更高的内容。这些行为是因为它们具有属性display：block。

Answer 3

你使用了％，如果我没记错的话，它是相对于父元素的。 vh（视口高度）是相对于屏幕的高度（100vh是屏幕的整个高度）。我添加了背景颜色，因此更容易看到。

<style>
#header {
    background-color: #777;
    height: 20vh;
}
#main {
    background-color: #999;
    height: 80vh;
}
#about {
    background-color: #777;
    height: 100vh;
}
#contact {
    background-color: #999; 
    height: 50vh;
}
</style>

没有绝对位置的单页网页

3 个答案: