html - 无法正确填充页面背景

Question

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

出于某种原因，<div> s 不会像我想要的那样填充背景 — 背景始终保持可见(在 <div> s 的左/右和顶部/底部)。

我想要实现的目标:

• 我的整个页面是一个单页网站。页面由5个矩形组成<div> s，以垂直方式“接触”彼此(它们之间的背景为 0 像素)。 我不希望背景在页面的任何部分都可见。
• 我想要顶部 <div>填充屏幕的上部分(“触摸”浏览器的上部菜单)和右侧/左侧。
• 我想要中间 3 个中的每一个 <div> s “触摸”屏幕的左侧和右侧(当然触摸上下两个 <div> s，它们之间没有任何空间 [看不到背景])。
• 我想要底部 <div>填充屏幕的下部分(“触摸”浏览器的下部菜单)和右/左边。

我已经尝试更改 position CSS 部分的值。结果始终是页面的“扭曲”版本。

---

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

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