CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Иван Димитров
Иван Димитров

Reputation: 133

Bootstrap Footer positioning

I know that there are thousands of Topics about Footers but I still cannot ajust mine, I have tryed alot of things but nothing helped..... The footer should be always at the bottom of the page visible only when I scroll down the content. Hope someone will have any suggestions!

This is my footer:

<div class="wrap">
......
</div>
<div class="footer">
      <div class="container">
        <div class="col-sm-4">  
            <img class="menu-icon" src="img/other/user.png"><h11>Account</h11>
            <ul class="unstyled">
            <li><a href="#" style="color: #909090;">ddd</a></li>
            <li><a href="#" style="color: #909090;">ddd</a></li>
            </div>
            <div class="col-sm-4">
            <img class="menu-icon" src="img/other/gear.png"><h11>Support</h11>
            <ul class="unstyled">
            <li><a href="#" style="color: #909090;">ddd</a></li>
            <li><a href="#" style="color: #909090;">ddd</a></li>
            <li><a href="#" style="color: #909090;">ddd</a></li>
            <li><a href="#" style="color: #909090;">ddd</a></li>
            </div>
            <div class="col-sm-4">
            <img class="menu-icon" src="img/other/share.png"><h11>Share Us</h11>
            <ul class="unstyled">
            <li><a href="#" style="color: #909090;"><img class="menu-icon" src="img/other/tw.png">Twitter</a></li>
            <li><a href="#" style="color: #909090;"><img class="menu-icon" src="img/other/fb.png">Facebook</a></li>
            <li><a href="#" style="color: #909090;"><img class="menu-icon" src="img/other/gp.png">Google Plus</a></li>
            </div>
        </div>
        </div>

CSS:

html,
body {
  height: 100%;
}
.wrap {
 height: auto !important;
  min-height: 100%;
}
.footer {
    position:absolute;
   bottom:0;
   width:100%;
  height: 140px;
  background-color: #222;
}

Upvotes: 0

Views: 67

Answers (2)

Steevan
Steevan

Reputation: 826

Check if the below link works with you.

Fiddle

#footer {
position: relative;
background-color: darkcyan;
color: white;
z-index: 1;

}

Upvotes: 2

Christer
Christer

Reputation: 1681

Im not a 100% sure what your trying to achive. but i suspect that the error might be in your css.

you are currently using: position:absolute; And if you want your footer to stick to the bottom of the content, you shouldnt need to manipulate the element to use absolute positioning.

Is this the issue you are facing? this example is using position:absolute as your code suggests. https://jsfiddle.net/pvwLu49x/1/

is this what you are trying to do?

https://jsfiddle.net/pvwLu49x/2/

Upvotes: 1

Related Questions