Bootstrap 3 Flush footer to bottom. not fixed

前端未结

关注

 13  2614

走了就别回头了

I am using Bootstrap 3 for a site I am designing.

I want to have a footer like this sample. Sample

Please note that I don\'t want it FIXED so bootstrap navba

相关标签:

13条回答

悲哀的现实

2020-12-02 04:09
UPDATE: This does not directly answer the question in its entirety, but others may find this useful.

This is the HTML for your responsive footer
```
<footer class="footer navbar-fixed-bottom">
     <div class="container">
     </div>
</footer>
```
For the CSS
```
footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}
```
NOTE: At the time of the posting for this question the above lines of code does not push the footer below the page content; but it will keep your footer from crawling midway up the page when there is little content on the page. For an example that does push the footer below the page content take a look here http://getbootstrap.com/examples/sticky-footer/
0 讨论(0)
发布评论:

提交评论
- 加载中...

萌比男神i

2020-12-02 04:12

For Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>

0 讨论(0)

一个人的身影

2020-12-02 04:13

See the example below. This will position your Footer to stick to bottom if the page has less content and behave like a normal footer if the page has more content.

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

UPDATE: New version of Bootstrap demonstrates how to add sticky footer without adding a wrapper. Please see Jboy Flaga's Answer for more details.

0 讨论(0)

生来不讨喜

2020-12-02 04:14

This method uses minimal markup. Just put all your content in a .wrapper which has a padding-bottom and negative margin-bottom equal to the footer height (in my example 100px).

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>

0 讨论(0)

别跟我提以往

2020-12-02 04:15

Galen Gidman has posted a really good solution to the problem of a responsive sticky footer that does not have a fixed height. You can find his full solution on his blog: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }

0 讨论(0)

北恋

2020-12-02 04:16

Or this

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>

0 讨论(0)

1 2 3 下一页