oneman oneman - 25 days ago 6
CSS Question

One page website basic layout

I have the following layout for my onepage site, I've never made one before so it is very much a learning curve.

The only issue I can currently see with this is when I shrink the height of the page, the div size also shrinks, even when I add

min-height: 800px;
. What can I do to get around this issue? (If I didn't explain this properly, use my code and shrink the height of your page so you can only just see the background-colors, then scroll, you will notice that in fact, the height is not 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>





EDIT: To explain why I am using
position: absolute

I use
position: absolute
so that I am able to use
top
left
and
right
so that I don't have the margin around each div.

Without
absolute

enter image description here

With
absolute

enter image description here

GvM GvM
Answer

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>