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;
}

Answer 2

我不太确定，这就是全部，你想要的。请查看jsfiddle。

请查看以下代码：

<强> HTML

<div class="footer">
  <div class="container">
    <div class="row">
        <div class="col-xs-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-xs-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 class="more-info">    
        <a href="#">Privacy Policy</a>
        <a>|</a>
        <a href="#">Terms</a>
        <ul class="pull-right">
        <a></a>
        </ul>
     </div>
   </div>            
</div>

<强> CSS

.footer {
height: 200px;
border-top: 1px solid #d8d8d8;
position: absolute;
bottom: 0;
width: 100%;
}
.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;
}
.learn-more h3 {
font-weight: bold;
font-size: 23px
}
.learn-more a {
color: #00b0ff;
text-decoration: underline;
font-size: 15px;
}
.learn-more {
height: 480px;
}

如何让我的页脚粘在页面底部

2 个答案: