html - 如何使页脚固定在页面底部

Question

您好，我为我的网站做了一个页脚，我认为它适用于我的所有页面，但是当我尝试将它添加到第二页时，它在页面底部留下了一个空白!

在我的索引页上我没有这个问题有人可以帮忙吗!

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h4>Links</h4>
                <li><a href="index.html">Home</a></li>
                <li><a href="courses.html">Courses</a></li>
                <li><a href="sign-up.html">Sign Up</a></li>
                <li><a href="log-in.html">Log In</a></li>
                <li><a href="about.html">About</a></li>
            </div>

            <div class="col-sm-6">
                <h4>Social Media</h4>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Youtube</a></li>
                <li><a href="#">Instagram</a></li>
            </div>
        </div>
    </div>
</div>

CSS

.footer {
    height: 200px;
    border-top: 1px solid #d8d8d8;
}
.footer li {
    text-decoration: none;
    font-weight: bold;
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    margin-top: 2px;
}
.footer h4 {
    font-weight: bold;
    margin-top: 30px;
}

底部的文字我是怎么做的

<div class="more-info">
    <div class="container">
            <a href="#">Privacy Policy</a>
            <a>|</a>
            <a href="#">Terms</a>
            <ul class="pull-right">
            <a></a>
        </div>
    </div>

CSS

.learn-more h3 {
font-weight: bold;
font-size: 23px
}
.learn-more a {
color: #00b0ff;
text-decoration: underline;
font-size: 15px;
}
.learn-more {
height: 480px;
}

Answer 1

试试这个

.footer {
  position: fixed;
  bottom: 0;
}