如何在底部添加可灵活调整页脚的页脚，并可以根据页面的高度进行调整？

Question

这是我在CSS中所做的：

.html {
    height: 100%;
    margin: 0;
    padding: 0;
    }

.body{
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrapper {
        min-height: 100%;
        position:relative;
}

.footer {

  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 40px;
  width: 100%;

    }
p.copyright
{   
   font-size:15px;
   font-weight:bold;
   color:red;
   text-align:center;
   padding: 13px 0px 0px 0px;
   background-color:green;
}

这就是我在aspx中所做的：

<div class="wrapper">
  <footer>
    <p class="copyright">Copyright 2017 Anime Toys</p>
  </footer>
</div>

使用这些代码，我面临两个问题：

问题1：

在“登录”页面中，页脚显示在登录表单的正下方。它不会显示在页面底部。

问题2：

在Gridview页面中，由于行太多，您需要向下滚动以查看页脚显示在页面底部，这完全可以。但是，问题在于，页脚下方的底部有一些白色背景。

我要为问题1实现的目标是：

在“登录”页面中，页脚应显示在页面底部。但这并不意味着我必须一直向下滚动才能看到页脚。换句话说，“登录”页面应该能够在页面底部显示页脚，而无需向下滚动。此外，页脚下方不应有一小部分白色背景。

我要为问题2实现的目标是：

在具有太多行的Gridview页面中，那么很明显，我必须向下滚动才能看到页脚，这对我来说完全可以。但是，我需要确保在gridview的最后一行和页脚之间不应有太多的间隙或空白，在这里我必须一直向下滚动才能看到页脚。换句话说，页脚将显示在页面底部，但在gridview的最后一行和页脚之间不应存在不必要的间隙。更重要的是，页脚下方也不应有一小部分白色背景。

我无法在我的CSS代码中找出我的错误：

如果有任何错误，那么提供建议的语法解决方案将很有帮助。