我的页脚不会保持固定位置，内容和页脚之间有空间

Question

我在内容和页脚之间留有很大的空白...我尝试使用position:fixed，margin:0和padding:0，但似乎没有任何效果。 附上我的代码以供参考。

任何帮助将不胜感激。

<footer>
    <div class="social-media">
        <p>MardiDrama Club</p>
        <a class="facebook" href="#">
            <img src="assets/images/iconfinder_square-facebook_317727.png">
        </a>
        <a class="instagram" href="#">
            <img src="assets/images/iconfinder_Instagram_381384.png">
        </a>
        <a class="twitter" href="#">
            <img src="assets/images/iconfinder_twitter_410515.png">
        </a>
    </div> 
</footer>

footer {
    position: fixed;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    width: 100%;
    background-color: #4FAFF9;
    text-align: center;
    color: white;
}

.social-media{
    margin: 310px auto;
    justify-content: space-around;
    display: flex;
    max-width: 700px;

}

.social-media a{
    text-decoration: none;
    color: #4FAFF9;
    width: 60px;
    height: 80px;
    transition: 0.4s all;
    line-height: 58px;
    cursor: pointer;
    background: #96C7ED
    border-radius: 58%;
}

.social-media p{

    text-align: center;
    white-space: nowrap;
}

.social-media a:hover{
    transform: scale(1,1.5);
}