HTMl中内容离页面底部距离,css – 限制高度与页面底部的距离

如果您的目标是现代浏览器,则可以使用

calc和

vh来实现目标.

如果您需要将按钮放在屏幕中间,只需从.popup的最大高度中减去按钮的位置即可.

.wrapper {

position: absolute;

top: 80px; /*the position of your floating button*/

right: 50px;

}

.button {

display: block;

width: 50px;

padding: 10px;

float: right;

box-sizing: border-box;

text-align: center;

border: 1px solid red;

}

.popup {

position: absolute;

max-height: calc(100vh - 50px - 80px); /*modify the value to fit your needs, 80px is the position of your floating button*/

overflow-y: scroll;

width: 100px;

padding: 10px;

right: 55px;

top: 0;

border: 1px solid blue;

}

Star

Option 1

Option 2

Option 3

Option 4

Option 5

Option 6

Option 7

Option 8

Option 9