单页网站基本布局

我对我的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

单页网站基本布局

回答

相关问题