Pakitorocker Pakitorocker - 4 months ago 15
HTML Question

How to keep an html element fixed at the bottom of the window while resizing, but not at scrolling?

I'm trying to do exactly as this page does, If you resize the second page, you'll notice that the container header (the one with the phone numbers, address and "book now" button) keeps fixed at the bottom of the window, but if you start scrolling down the page, you can continue with the rest of the content. How can I do that?

I'm using Twitter Bootstrap 3.

Answer

They use calc(100vh - 75px) to calculate the height of the top div. So the first div will always cover the entire viewport height (100vh) minus 75px.

.property-page .full-screen {
    min-height: calc(100vh - 75px);
    height: calc(100vh - 75px);
}

The "book now" button is just an element with position:fixed;

Something like this should do what you want:

https://jsfiddle.net/zaw0mptm/2/