CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfooter
McLaren
McLaren

Reputation: 776

Problems with footer bootstrap

I'm using Twitter Bootstrap, Is there are any classes for footer? Because I can't make it to stay on bottom. Here is my jsfiddle https://jsfiddle.net/fNPvf/18578/. This is footer css:

.footer-no-nav {
    border-top: 1px solid #C2B8B8;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

Here is the picture when I use bootstrap class navbar-fixed-bottom enter image description here

Here is when the window resized: enter image description here

Fixed my problem, no need any navbar-fixed-bottom:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

Upvotes: 2

Views: 5696

Answers (5)

RepeatQuotations
RepeatQuotations

Reputation: 724

Sounds like you are after a Sticky Footer.

Updated fiddle here: https://jsfiddle.net/fNPvf/18589/

The css relies on a removing the total height of the footer from the margin-top to make the footer stick to the bottom unless there is enough content to push it further. For a 40px height + 1px border-top footer this would calculate our margin-top to equal -41px.

footer {
    border-top: 1px solid #C2B8B8;
    height:40px;
    margin-top:-41px;
}

body,html{
    height:100%;
}
.container{
    min-height:100%;
}

<body>
  <div class="container">main content can go here</div>
  <footer>sticky footer content is stuck here</footer>
</body>

Upvotes: 1

McLaren
McLaren

Reputation: 776

I've just fixed my problem, no need any navbar-fixed-bottom:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

Upvotes: 1

badr aldeen
badr aldeen

Reputation: 470

try to add div for all your contain 

.all    {
    min-height:750px;

    }

and this is the link for your footer https://jsfiddle.net/fNPvf/18587/

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16341

Add navbar-fixed-bottom class to fixed it to the bottom like this:

<footer class="footer-no-nav navbar-fixed-bottom" role="contentinfo">
    <!--content-->
</footer>

N.B. You will have to give a background-color to the footer div and add a margin-bottom equivalent to the height of the footer to prevent elements from being covered by the footer.

Upvotes: 0

Forum999
Forum999

Reputation: 140

This work for my webpage

<div class="panel-footer navbar-inverse navbar-fixed-bottom">

Upvotes: 0

Related Questions