html - 页脚显示在页面中间？

Question

我的页脚没有出现在底部，它出现在除了这个页面之外的所有其他页面上(下面的代码)。页脚中的内容显示在底部(组件的错误位置，但仍在底部)但背景颜色位于页面中间。

代码如下:

<footer id="fots">
            <div id="infof">
                <div id="infoc">
                    <ul class="ulfot" id="ulfk">
                        <li><b>Destinatons</b></li>
                        <li>London</li>
                        <li>Sarajevo</li>
                        <li>Istanbul</li>
                        <li>Gothenburg</li>
                    </ul>
                    <ul class="ulfot">
                        <li><b>Flight info</b></li>
                        <li>Before flying</li>
                        <li>When flying</li>
                        <li>After flying</li>
                    </ul>

                </div>
            </div>

            <div id="fotsd">
                <div id="leftis">   
                    <p><b> &copy something </b></p>
                </div>
                <div id="rightis">
                    <a href="#" id="bks">Back to top <span class="glyphicon glyphicon-arrow-up"></span> </a>
                </div>
            </div>  
        </footer>

这是CSS:

#infoc{
width: 960px;
display: block;
margin-left: auto;
margin-right: auto;
}
#fots{
background-color: #ebebeb;
width: 100%;
}
#fotsd{
height: 50px;
padding-top:15px;
padding-left: 5px;
padding-right: 5px;
width: 960px;
display: block;
margin-left: auto;
margin-right: auto;
}
#leftis{
width: 300px;
float: left;
font-family: 'Raleway', sans-serif;
}
#rightis{
width: 300px;
float: right;
text-align: right;
color: black;
font-family: 'Raleway', sans-serif;
}
#bks{
color: black;
}
#infof{
width: 100%;
height: 180px;
background-color: gray;
}

Answer 1

如果我理解正确，这就是您想要的:FIDDLE

更改此 CSS

#fots{
background-color: #ebebeb;
width: 100%;
}

为此:

#fots{
background-color: #ebebeb;
width: 100%;
position:fixed; /*new*/
bottom:0;/*new */
}

并更改此 CSS:

#infof{
width: 100%;
height: 180px;
background-color: gray;
}

为此:

#infof{
width: 100%;
/*height: 180px;*/ /*removed*/
background-color: gray;
}