问题描述:

I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.

I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?

Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.

https://jsfiddle.net/DTcHh/10301/

网友答案:

try with fixed

.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

js fiddle example

网友答案:

non-fixed, see the below:

your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.

.footerElement { 
    // base styles all styles
    display: inline-block; // add this, does as you imagine
}

"Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box" -W3schools

scrollbar, see the below:

As for the element that has a scrollbar resolving.

.elementwithScrollbar { 
      // base styles all styles
      overflow:hidden; // or use overflow-y:hidden; or x
}

fixed, see the below:

If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)

"Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page." -MDN

网友答案:

Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.

To fix, amend your spelling mistake here:

.contrainer-fluid {                  <-- should be container
position: relative;
}
相关阅读:
Top