Bootstrap 3 and Sticky Footer

2020-06-16 09:11发布

站内问答 / 后端开发
1518 7 5

for the past hour I've been trying to figure out what exactly is wrong with my sticky footer not working. I have the exact same structure as the example given on the getboostrap site, but it doesn't seem to work. Any ideas what is exactly wrong?

All the bootstrap css files are loaded correctly.

    <body style="">

    <div id="wrap">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">Application name</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/Home/About">About</a></li>
                        <li><a href="/Home/Contact">Contact</a></li>
                    </ul>
                        <ul class="nav navbar-nav navbar-right">
        <li><a href="/Account/Register" id="registerLink">Register</a></li>
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

                </div>
            </div>
        </div>


        <div class="container">



<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
    </div>
</div>
        </div>

    </div>

    <div id="footer">
        <div class="container">
            <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
        </div>
    </div>


</body>

I found the solution. I thought including all the CSS would also have the CSS for the footer but apparently it does not. You require the following to make a sticky footer work with bootstrap

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

7条回答
劫难
2楼-- · 2020-06-16 09:50

Simple unique solution for sticky footer baes on @teh0wner, i added some JS

CSS

html {
  position: relative;
  min-height: 100%;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

JS

$(document).ready(function() {
    var height = $('footer').height();
    $('body').css({
        "margin-bottom": height
    });
});
查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
3楼-- · 2020-06-16 09:53 
html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}
查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
4楼-- · 2020-06-16 09:53

This is how it worked for me.

I added the Footer ID and custom style values to that ID , and for the same look and feel added "navbar-default"

HTML

<div id="footer" class="navbar-default">
  <div class="container">
    <p>Your Footer Content Here</p>          
  </div>
</div>

CSS

#footer {
   background-color: #F5F5F5;
   bottom: 0;
   height: 60px;
   position: relative;
   width: 100%;
}
查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
5楼-- · 2020-06-16 09:55

In bootstrap 3, container and footer classes, somehow override your css rules. I tried to change my footer's background-color. I tried many things that I found as solutions on the web and couldn't done successfully. After use clearfix class for footer the page became what I really want to see.

.myFooter {
  background-color: #c4a9f1;
  width: 100%;
}
.hi-icon a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 100;
}
<footer class="footer clearfix">
  <div class="container myFooter">
    <div class=" ">
      <div class="col-sm-3">
        <h3 class="page-header">Part 1 </h3>
        <ul>
          <li>Link1</li>
          <li>Link2</li>
          <li>Link3</li>
          <li>Link4</li>
        </ul>
      </div>
      <div class="col-sm-3">
        <h3 class="page-header">Part 2</h3>
        <ul>
          <li>Link1</li>
          <li>Link2</li>
          <li>Link3</li>
          <li>Link4</li>
        </ul>
      </div>


    </div>
  </div>
  </div>
</footer>

查看更多
0人赞 添加讨论(0) 举报
一纸荒年 Trace。
6楼-- · 2020-06-16 09:57

Why you are not using :

.navbar-fixed-bottom

This will solve your bottom fixed navigation issue and you can place anything in it.

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
7楼-- · 2020-06-16 10:08

Made a quick Fiddle with your code and some tweaks to the footer: http://jsfiddle.net/2Zaxt/.

<div id="footer" class="container">
    <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="navbar-inner navbar-content-center">
            <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
        </div>
    </nav>
</div>
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)