在CSS中的位置固定問題

這是我的小提琴：https://jsfiddle.net/5e37gjtp/。我想要的是我的班級content將在header之後開始。我不想使用margin-top或padding-top。這是我的代碼：在CSS中的位置固定問題

<div class="header"></div> 
<div class="content"></div>

和CSS：

.header {height:200px;border:1px solid black; width:100%;position:fixed;left:0px;top:0px;} 
.content{height:800px;border:1px solid black}

正如你所看到的內容是標題後面。我想在它後面展示。我想保持固定的位置，因爲是頁面的標題，我想在滾動後保留它。可能嗎？ thx

來源

2015-10-05 Chester

使用'margin-top'或'padding-top'時會出現什麼問題？因爲這解決了這個問題。 –

響應我需要添加或刪除邊距頂部或填充頂部。對於桌面版本，會有margin-top：10px;平板電腦margin-top：20px等等。這是醜陋的代碼。「 – Chester

如果您使用absolute或top，它會變得糟糕和難看。你的願望。好，你可以使用padding-top對於該<header>的高度相匹配的body：

body { 
    margin-top: 210px; 
} 
.header { 
    height:200px; 
    border:1px solid black; 
    width:100%; 
    position:fixed; 
    left:0px; 
    top:0px; 
    z-index: 2; 
    background-color: #fff; 
} 
.content { 
    height:800px; 
    border:1px solid black; 
}

小提琴：https://jsfiddle.net/og3auchm/1/

來源

2015-10-05 14:35:49

」'我不想用margin-top或padding-top.「 –

@CagatayUlubay沒有其他辦法。 –

@CagatayUlubay看到上面的答案。 –

如果你的頭的高度都一樣，你可以簡單地做：

.content{ 
    height:800px; 
    border:1px solid black 
    position: absolute; 
    top: 200px; 
}

小提琴：https://jsfiddle.net/ckmbemzp/

如果您的標題不具有相同的高度，則可以使用onLoad事件並計算標題的高度，然後可以更改top屬性。

來源

2015-10-05 14:36:27 Goowik

您可以通過將position:absolute;和top:201px;添加到您的內容來實現該目的，1px的額外因素是由於標題中計算的1px邊框。

您可能還想添加left:-1px;使其與左側對齊。我希望這有幫助！

來源

2015-10-05 14:40:46 Derk

在CSS中的位置固定問題

回答

相關問題