CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapscroll
Daniel Ellison
Daniel Ellison

Reputation: 1349

CSS/HTML - Floating DIV when I scroll issue

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/

Upvotes: 1

Views: 1913

Answers (3)

nextstep
nextstep

Reputation: 1460

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;
}

Upvotes: 0

Lieutenant Dan
Lieutenant Dan

Reputation: 8274

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

Upvotes: 0

&#214;zg&#252;r Ersil
&#214;zg&#252;r Ersil

Reputation: 7013

try with fixed

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

js fiddle example

Upvotes: 1

Related Questions