Bootstrap Footer, Full Width Of Page

问题

i'm designing a website with joomla and using the bootstrap framework. Now i have a problem by my footer. Basically i use a simple grid layout and i want the content part of the site in the center of the page with space on the left and the right side which i already achieved. And now i want the footer not in the middle like the content but on the end of the page and over the whole width of it and NOT FIXED. So i want normally scroll down the page and at the end of it the footer shall appear with full width. I searched for it a long time but i don' find any solution that worked. I hope somebody can help me to achieve it...

In the following are the scripts of the php-page and the css file i used

index.php

<!DOCTYPE html>
<html>
<head>
    <jdoc:include type="head" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- main container -->
    <div class='container'>
        <!-- header -->
        <div class="mainMenuTop"/>
        <div class='row'>
            <jdoc:include type="modules" name="position-1" style="well" />
        </div>
        <div class='row'>
            <!-- main content area -->
            <div class='span12'>
                <div class="article">
                    <jdoc:include type="component" />
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class='row'>
            <div class='span12'>
                <div class='footer'>
                <jdoc:include type="modules" name="footer" style="none" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

style.css

body 
{
    overflow-y: scroll;
    background: url(../images/Test.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 }

.article
{
    padding: 25px;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255); /* The Fallback */
    font-size: 12pt;
    font-family:"Calibri", Times, serif;
}

.footer
{
    height: 50px;
    border-top: solid 1px black;
}

Kind Regards, oodoloo

回答1:

You can put your footer to separate <div class="container"> after the main content container. Then you can assign a container class which does not limit the width of the footer, like happens with main content. E.g.::

<div class="container">
      ...
</div>
<div id="footer" class="container-fluid">
    <div class="row">....</div>
</div>

回答2:

for my needs, now i fixed it like you can see here: jsfiddle-example

.footer
{
    height: 50px;
    background-color: black;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}

I have added "width: 100%", "position: absolute", "left: 0" and "right:0" to the css-class ".footer". I think decisive was the "position: absolute". Then i have to add the "left: 0" because the left side doesnt take the fullsize. after adding this it does. The "right: 0" i added, because of completeness. Doesnt know if it is needed in any other browser. Here it works also without it.

回答3:

I do this and it is right:

@media(max-width:500px){

    .footer{
        float:left;
        width:109%;
        margin-left:-5%;
    }

}

来源：https://stackoverflow.com/questions/22970117/bootstrap-footer-full-width-of-page

标签

twitter-bootstrap

footer