如何在调整大小时将html元素固定在窗口底部,而不是在滚动时?

时间:2016-07-26 16:06:28

标签: javascript html css twitter-bootstrap

我正在尝试与this page完全一样,如果您调整第二页的大小,您会注意到容器标题(包含电话号码,地址和“立即预订”按钮的标题)保留固定在窗口底部,但如果您开始向下滚动页面,则可以继续使用其余内容。我怎么能这样做?

我正在使用Twitter Bootstrap 3。

2 个答案:

答案 0 :(得分:0)

他们使用calc(100vh - 75px)来计算顶部div的高度。 因此第一个div将始终覆盖整个视口高度(100vh)减去75px。

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

“立即预订”按钮只是position:fixed;

的元素

这样的事情应该做你想做的事情:

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

答案 1 :(得分:0)

你可以检查一下

<body>
   <div id="footer"></div>
</body>

然后使用此css

#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:100px;   
  background:blue;//optional
 }