Twitter Bootstrap Question posted in

Twitter bootstrap – how to have a footer stay at bottom?

Ok, so I created a wireframe to elaborate on the situation: https://wireframe.cc/cQsG8D

Basically I have a page (in HAML if that makes any difference) … in which there is a scrollable viewport whose height is set to 360px currently.

And there is a text message box underneath it … I’ve tried everything to get that text message box go down to the bottom of the page, including doing the same things that twitter bootstrap does in their example: getbootstrap.com/examples/sticky-footer-navbar/

I want to be able to get rid of the height requirement of the viewport, if that’s possible and to get the text message box stay at the bottom of the page.

Any advice, please? I’ve been noodling on this pretty much the whole day yesterday, and now, I’m crazy sick of it …

Tags:

2

Answers


  1. 0

    Try absolute positioning for the footer.

    .bottom-footer {
  position: absolute;
  bottom: 0;
}

    If you wanted it to be sticky, replace position: absolute with position: fixed

    Login or Signup to reply.
  2. 0

    Add below properties to your textbox

    DEMO HERE

    #txtBottom
{
    position:fixed;
    bottom:0px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search