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

Fcojavmelo
July 26, 2016
254 views
0 votes
2 Answers

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.

Answers

- GeorgePant
- July 26, 2016 at 6:27 pm
- 0 votes
0
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/
Login or Signup to reply.

- ShafiqulIslam
- July 26, 2016 at 6:52 pm
- 0 votes
0
you can check it
```
<body>
   <div id="footer"></div>
</body>
```
then use this css
```
#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:100px;   
  background:blue;//optional
 }
```
Login or Signup to reply.