CSS - 元素的定位（絕對標題，正文，固定頁腳）

我對html和css比較陌生，目前我遇到了兩個惱人的問題。CSS - 元素的定位（絕對標題，正文，固定頁腳）

除非我的標題的位置是絕對的，它不會覆蓋上方和下方的小區域。但是，當位置是絕對的時候，它下方的容器會部分落在標題後面。

我希望我的頭部覆蓋與位置絕對相同的區域，但我希望容器的位置自動地位於頭部下方。

當我將頁腳分成兩半時，「開始」位於左側，「接觸」位於右側，將版權部分添加爲浮動：這條線上的其他所有東西都被推到了一邊。

我希望「開始」和「聯繫」從中間向外擴展，而版權部分位於最右側。一切都在同一行上。

標頭的不透明度只是爲了顯示問題。
中間的一行是確保頁腳的文字位於中間。
我想避免滾動條。

header { 
    width: 100%; 
    opacity: 0.5; 
    position: absolute; 
    top: 0; 
    background-color: black; 
    color: white; 
    text-align: center; 
}

來源

2016-10-05 Ash_dog

有關header：收割頭高度設置爲100像素。然後將您身體的邊距設置爲100px。

對於滾動條：這部分取決於身體的高度。如果你想避免滾動條，那麼你可能需要從100％改變身高。

對於聯繫/分享鏈接：我會添加填充左/右，以便他們彼此分開。爲了讓它們伸展得更遠，你可以改變文字的大小。另一種選擇是將它們放入寬度爲40％的容器中，並將整個容器作爲鏈接。

來源

2016-10-05 18:18:20

謝謝你的回答！儘管我想避免將px添加到任何內容，這是可能的嗎？由於滾動條不會出現，直到我添加特定數量的px到任何東西。此外，我想要保持頁面的100％高度以適應用戶的窗口大小。對於最後一個答案 - 我的主要問題不是分離鏈接，而是讓它們居中在頁面中間。右邊的文字將它們推到左邊。 –

header應該有overflow: hidden;然後你很好。這是因爲裏面的物品有擴展容器的margin。

來源

2016-10-05 18:58:06

當我添加「overflow：hidden;」時什麼也沒有發生。我做錯了什麼？ –

CSS - 元素的定位（絕對標題，正文，固定頁腳）

回答

相關問題