單頁網站基本佈局

我對我的onepage網站有以下佈局，我以前從未做過一個，所以它是一個學習曲線。單頁網站基本佈局

我目前唯一可以看到的問題是，當我縮小頁面高度時，即使添加了min-height: 800px;，div大小也會縮小。我能做些什麼來解決這個問題？（如果我沒有正確解釋，請使用我的代碼並縮小頁面的高度，以便只能看到背景顏色，然後滾動，您會注意到，實際上，高度不是800px），

div.top, 
 
div.mid, 
 
div.bottom { 
 
    height: 100vh; 
 
    min-height: 800px; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
div.top { 
 
    background-color: red; 
 
    top: 0; 
 
} 
 
div.mid { 
 
    background-color: blue; 
 
    top: 100vh; 
 
} 
 
div.bottom { 
 
    background-color: yellow; 
 
    top: 200vh; 
 
}

<div class="top"> 
 
    <h1>Top</h1> 
 
</div> 
 

 
<div class="mid"> 
 
    <h1>Mid</h1> 
 
</div> 
 

 
<div class="bottom"> 
 
    <h1>Bottom</h1> 
 
</div>

編輯：要解釋爲什麼我使用position: absolute 我用position: absolute使我能夠使用topleft和right讓我沒有圍繞每一個DIV的空白。

沒有absolute

隨着absolute

來源

2016-11-14 oneman

這是因爲'位置：絕對;' – GvM

@GvM那麼你會建議使用什麼呢？因爲'fixed'禁止滾動和「相對」的能力創建一個我永遠不會使用的醜陋佈局 – oneman

當您使用'position：absolute'時，該元素在頁面上沒有權重，因此瀏覽器將渲染它，再次處理它。你正在使用div的堆疊ontop，所以沒有必要使用絕對位置，他們會自然堆積 – Alex

body { 
 
    margin: 0; 
 
} 
 
.top, .mid, .bot { 
 
    height: 100vh; 
 
    min-height: 800px; 
 
    width: 100%; 
 
} 
 
.top { 
 
    background: red; 
 
} 
 
.mid { 
 
    background: blue; 
 
} 
 
.bot { 
 
    background: green; 
 
}

<div class="top"> 
 
    <span>top</span> 
 
</div> 
 
<div class="mid"> 
 
    <span>mid</span> 
 
</div> 
 
<div class="bot"> 
 
    <span>bot</span> 
 
</div>

來源

2016-11-14 01:42:22 GvM

啊，我沒有想到機構的默認保證金。這按預期工作。 – oneman

你的 '保證金' 從H1標籤的到來，移除及間隙的div之間消失。我已經去除了絕對定位和左/右/上值，因爲它們是多餘的拆除保證金：

div.top, 
 
div.mid, 
 
div.bottom { 
 
    height: 100vh; 
 
    min-height: 800px; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    margin-top: 0; 
 
} 
 

 
div.top { 
 
    background-color: red; 
 
} 
 
div.mid { 
 
    background-color: blue; 
 
} 
 
div.bottom { 
 
    background-color: yellow; 
 
}

<div class="top"> 
 
    <h1>Top</h1> 
 
</div> 
 

 
<div class="mid"> 
 
    <h1>Mid</h1> 
 
</div> 
 

 
<div class="bottom"> 
 
    <h1>Bottom</h1> 
 
</div>

來源

2016-11-14 09:35:36 efreeman

單頁網站基本佈局

回答

相關問題