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

Answer 2

#fots {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 60px; 
   background: #ebebeb;
}

根据this source（第一个谷歌搜索结果......）

将位置设置为绝对值应保持在底部

页脚显示在页面中间？

2 个答案: