我的页脚去哪儿了

Question

I have made a site with Bootstrap and now I'm facing this problem that the footer that I just created does not show up at all somehow!

Here's the footer html codes:

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

And the result I get, is this:

print screen

So as you can see it does not show up correctly! And this is also the css for this footer:

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

So what am I doing wrong ? Why it does not appear correctly ?

Not that my footer is inside of a div with id of content with this settings:

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

}

Answer 1

You don't need to specify the height of #content . Try changing height: 3800px to height: auto an see if that works.

The problem is that when you specified height with overflow: hidden you have limited space for content, extra content will be hidden.

Also your #content has duplicated background color, you probably want only one of this two background-color: black and background: #ebebeb .