<div> 无法正确填充页面背景

Question

我在单页网页设计中遇到<div>定位问题。更具体地说——我找不到正确填充背景的方法，使用 <div>s.

出于某种原因，<div> 不会像我想要的那样填充背景 — 背景始终保持可见（在 [=13 的 left/right 和 top/bottom 侧=]s).

我要实现的目标：

我的整个页面是一个单页网站。该页面由 5 个矩形 <div> 组成，"touching" 彼此垂直排列（它们之间的背景为 0 像素）。 我不希望背景在页面的任何部分都可见。
我想让 top <div> 填充屏幕的 upper 部分（"touch" 浏览器的上层菜单）和 right/left 边。
我想要屏幕中间 3 个 <div> 到 "touch" 左右边的每一个（当然还要触摸两个<div> 上下，它们之间没有任何 space [没有看到背景])。
我希望底部 <div> 填充屏幕的下方部分（"touch" 浏览器的下方菜单）和 right/left 边。

我尝试更改 CSS 部分的 position 值。结果始终是页面的 "twisted" 版本。

我的HTML代码：

<div id="page1" align="center">
    <a id="about"></a>
</div>
<div id="page2">
    <a id="portfolio"></a>
</div>
<div id="page3">
    <a id="Dream"></a>
</div>
<div id="page4">
    <a id="contact"></a>
</div>
<div id="page5">
    <a id="Love"></a>
</div>

我的CSS代码：

#page1{
    height : 1000px;
    background-color: #4c3719;
}
#page2{
  height : 1000px;
    background-color: #9a8479;
} 
#page3{
    height : 1000px;
    background-color: #ddbad8;
}
#page4{
    height : 1000px;
    background-color: #ddd28d;
}
#page5{
    height : 1000px;
    background-color: #ed9aa9;
}

Answer 1

写在所有CSS代码之前

* {
    margin:0; 
    padding:0
}

如果我理解正确，这可能会有所帮助

<div> 无法正确填充页面背景

<div> fails to fill the page background properly

html

css

background