内容部分显示滚动上的额外白色间距

Question

    <select name="discount">
       <option value="10%">10%</option>
       <option value="9%">9%</option>
       <option value="8%">8%</option>
       <option value="7%">7%</option>
       <option value="6%">6%</option>
       <option value="5%">5%</option>
       <option value="4%">4%</option>
       <option value="3%">3%</option>
       <option value="2%">2%</option>
       <option value="1%">1%</option>
       <option value="0%">0%</option>
    </select>

header{
    position: fixed;
    width: 100%;
    height: 57px;
    top: 0;
    background-color: gainsboro;
    float: left;
    right: 0;
}
article {
    /*position: fixed;*/
    width: 100%;
    background-color: deepskyblue;
    float: left;
    right: 0;
    margin-top: 57px;
    margin-bottom: 48px;
    /*height: 100%;*/
    }
footer{
    width: 100%;
    height: 48px;
    position: fixed;
    bottom: 0;
    float: left;
    right: 0;
    background-color: yellow;
}

在上面的代码中，我试图将top和header部分始终固定在各自的位置上，内容部分可以根据它的长度滚动。

1. 我面临的问题是当滚动条向上移动时会出现一个空白区域。我不知道如何处理它，有时会显示在底部
2. 我面临的另一个问题是内容部分的额外填充。我给了文章属性值<header> </header> <article> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p><p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>testing...........</p> <p>working...?</p> <p>working...?</p> <p>working...?</p> <p>working...?</p> <p>working...?</p> <p>working...?</p> <p>working...?</p> <p>working...?</p> <p>working...?</p> <p>working...?</p> <p>working...?</p> <p>working...?</p> </article> <footer> </footer>。但它仍然显示了一些填充。

我该如何解决这两个问题？

Answer 1

在大多数主流浏览器中，默认的主体边距为8px。它由您的浏览器提供的用户代理样式表以像素为单位定义。

你必须只为身体添加css：

/search/label/tiger+animal%20kingdom

但是如果你有一个大型项目并希望更完整，请使用normalize.css。它会将许多默认值重置为跨浏览器保持一致。

Answer 2

首先，你必须使用像这样的边距和填充来规范化HTML元素

*{
margin:0px;
padding:0px;
}