Question

我已经使用Bootstrap创建了一个站点，现在我遇到了这个问题，我刚创建的页脚根本不会显示出来！

这是页脚html代码：

<div class="footer">
                <div class="container-fluid">
                    <div class="topfooter">
                        <div class="row">
                            <div class="col-md-1"></div>
                            <div class="col-md-10 socails">
                                <ul>
                                    <li><a href="default.asp">Home</a></li>
                                    <li><a href="news.asp">News</a></li>
                                    <li><a href="contact.asp">Contact</a></li>
                                    <li><a href="about.asp">About</a></li>
                                </ul>
                            </div>
                            <div class="col-md-1"></div>
                        </div>
                    </div>
                    <div class="middlefooter">
                        <div class="row BKoodakBold">
                            <div class="col-md-3">
                                <h1 class="footerTitle">واحد امور مالی</h1>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                            </div>
                            <div class="col-md-3">
                                <h1 class="footerTitle">واحد امور مالی</h1>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                            </div>
                            <div class="col-md-3">
                                <h1 class="footerTitle">واحد امور مالی</h1>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                            </div>
                            <div class="col-md-3">
                                <h1 class="footerTitle">واحد امور مالی</h1>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                                <a class="footerPara">پیگیری سفارش</a></br>
                            </div>
                        </div>
                    </div>
                    <div class="bottomfooter">
                        <div class="row">
                            <div class="col-md-1"></div>
                            <div class="col-md-10 socails">
                                <ul>
                                    <li><a href="default.asp">Home</a></li>
                                    <li><a href="news.asp">News</a></li>
                                    <li><a href="contact.asp">Contact</a></li>
                                    <li><a href="about.asp">About</a></li>
                                </ul>
                            </div>
                            <div class="col-md-1"></div>
                        </div>
                    </div>
                </div>
            </div>

我得到的结果是：

print screen

所以你可以看到它没有正确显示！这也是这个页脚的css：

    .footer{
    height:400px;
    background-color:black;
}

.socials{

}
.socials ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

}
.socials ul li {
    display: inline;
    text-decoration:none;
}
.footerTitle{
    font-size:20px;
}
.footerPara{
    padding-right:3px;
}
.footerPara, .footerTitle{
    text-align:right;
    color:#fff;
}

那么我做错了什么？为什么它没有正确显示？

我的页脚不在div内，其ID为content，但设置如下：

#content{
background-color:black;
width:100%;
position:absolute;
top:550px;
background:#ebebeb;
height:3800px;
overflow:hidden;

}

Answer 1

您不需要指定#content的高度。尝试将height: 3800px更改为height: auto，看看是否有效。

问题在于，当您使用overflow: hidden指定高度时，内容空间有限，则会隐藏额外内容。

此外，您的#content背景颜色重复，您可能只需要这两个background-color: black和background: #ebebeb中的一个。

我的页脚在哪里

1 个答案: