gpt4 book ai didi

css - 没有绝对位置的单页网页

转载 作者:行者123 更新时间:2023-11-28 17:28:02 25 4
gpt4 key购买 nike

有什么办法可以使没有绝对位置的单页网站?因为当我想改变容器的高度时,绝对位置有点尴尬。我的意思是当我向一个容器中插入更多内容时,它上面的另一个应该向下移动。我试过静态位置和相对位置,但它对我不起作用。

现在我的 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>

但是当一些容器需要更长的时候,问题就来了..

感谢您的帮助!

最佳答案

这取决于您网站的风格。当然,您可以设置 anchor 并拥有一个单页滚动网站,但我认为这不能回答您的问题。

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

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

关于css - 没有绝对位置的单页网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38557739/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com