没有绝对位置的单页网页

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（viewport height）是相对于屏幕的高度（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>

没有绝对位置的单页网页

Single page web without absolute position

css

position

singlepage