没有绝对位置的单页网页

-1

有没有办法让单页网站没有绝对位置？因为当我想变容器的高度时，绝对位置有点尴尬。我的意思是当我将更多内容插入到一个容器中时，其他容器应该向下移动。我试过静态和相对的位置，但它对我没有用。没有绝对位置的单页网页

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

但是，当一些容器需要更长，问题是在这里..

感谢您的帮助！

来源

2016-07-24 H Sturma

请更具体，缩小问题尽可能最小得到真正的什么样的帮助 – bugwheels94

@ user1533609我做了修改一些代码。我需要有可变顶边和高度的容器 –

我不明白。你知道html流的基础知识吗？如果将100％宽度的容器放置在顶部，其最大高度为20％（无论是否是其父级，可能为？），将允许它在放入更多内容时进行扩展。我不清楚你为什么首先使用绝对定位。 –

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

我的建议是尝试使用绝对定位的元素作为容器，并在里面有你的实际模板。

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

来源

2016-07-24 23:13:30 Joundill

当我在此处编写的代码中设置所有容器时，如果文本长度超过设置高度，它将不会以全尺寸显示，因为下一个容器的顶部边距会覆盖它。 –

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

完全沟通位置属性。

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

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

来源

2016-07-24 23:21:35

它与定位一起工作！但现在背景只包含有内容的空间，而不包括div的其余部分，因为它与绝对位置一样。我该如何解决这个问题？（对于这样的基本问题抱歉） –

它与什么定位？相对？你的意思是“没有定位”？您的代码和问题都没有提及任何背景;那是现在唯一的问题吗？如果是这样，请更新您的问题，以便我们看到发生了什么。我在所有div上设置背景颜色，当我运行您提供的代码时，它们都不重叠。 –

如果我没有记错的话，你已经使用了％，它是相对于父元素的。 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>

来源

2016-07-25 06:01:54

您也可以使用最小高度而不是高度。如果需要，它会让它扩大 –

没有绝对位置的单页网页

回答

相关问题