沒有絕對位置的單頁網頁

-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

您也可以使用最小高度而不是高度。如果需要，它會讓它擴大 –

沒有絕對位置的單頁網頁

回答

相關問題