CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Pedro Franco
Pedro Franco

Reputation: 2006

How to set footer responsive?

I have two pages, in one of them I can put the rodabe below with:

 #footer {
    position: absolute;
    bottom: 0;
 }

However, on the second page I have a Bootstrap dataTable and can choose how many columns show on the page, if I leave the footer absolute table data pass through the footer, causing me to alter the CSS:

 #footer {
    position: relative;
    bottom: 0;
 }

But with this second CSS on my first page, the footer appears in the middle of the screen. I want the both pages stay always at the bottom of the screen and get the recursion when the screen is increasing as the datatable .

How can I do that?

Upvotes: 1

Views: 542

Answers (2)

Renatto Machado
Renatto Machado

Reputation: 1574

Basicaly you just set the CSS

html, body {height:100%;}

.geral {
    min-height:100%;
    position:relative;
    width:800px;
}

.footer {
    position:absolute;
    bottom:0;
    width:100%;
}

The technique is to say that the html will occupy 100% of the page.

View the complete explanation in this link.

Upvotes: 3

Mckay Multimedia
Mckay Multimedia

Reputation: 1096

Since you are using Bootstrap, why not just add the .navbar-fixed-bottom class to the footer. Like this: http://www.bootply.com/aCRnwLXMwN

<footer class="navbar-fixed-bottom" style="background:#999;">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <p>All you get is this text and a mostly barebones HTML document.</p>
            </div>
        </div>
    </div>
</footer>

Upvotes: 1

Related Questions