html - 页脚不会调整到页面大小

Question

我希望我的页脚能够调整页面大小或我移动设备上的屏幕大小，这样它看起来就不会像一个非常大的空白页脚。

HTML:

<footer>
    <div class="footerwrapper">
    </div>
</footer>

CSS:

footer {
    height:100%;
    border-top: 1px dashed #FDF3E7;
    background-color:#250800;
    text-align:left;
}

.footerwrapper { border-bottom: 1px dotted #3B3738;padding:50px;min-height:200px; background-color:#220a03; margin: 0 auto; }

如上所示，我试图将包装器与我的父页脚重叠，但它并没有真正按照我想要的方式工作。我实际上只希望页脚填充页面的其余部分(也在移动设备上)，而不会淹没页脚。有人吗？

Answer 1

CSS文件:

footer{
    min-height:200px; //you can define any height you like!
}
footer .footerwrapper {
    border-bottom: 1px dotted #3B3738;
    background-color:#220a03; 
    margin: 0 auto;
    width: 500px;// this width you can define your self
    position: fixed;
    bottom: 0;
}