如何使一个div隐藏/滚动溢出并按比例缩放到视口，同时保持一致的边距？

12 浏览
0 Comments

如何使一个div隐藏/滚动溢出并按比例缩放到视口，同时保持一致的边距？

我需要为div的高度设置一个值，以便它可以正确隐藏/滚动溢出，但我不想要一个特定像素高度的div。我可以通过使用%或vh单位来解决这个问题，但我实际上不想使用这些单位。我的意思是，我不希望我的div始终是页面的2/3，因为这意味着div的底部与浏览器窗口的底部的距离不同，就像这样-

我希望它与浏览器窗口的底部始终保持一致的距离，就像这样-

基本上，我希望我的div的高度是可变的，并且可以隐藏/滚动溢出，但始终与底部保持距离为10px。

这些链接描述了我遇到的相同问题：

这些答案是使用表格或flexbox-这些是唯一的选择（不使用javascript）吗？

我的代码：

0

1 答案

0 Comments

问题的出现原因是使用calc()函数时没有正确实现所需效果。解决方法是在calc()函数中减去上方的

的高度，并将overflow属性设置为auto。

解决方法的代码如下：

/* 这些样式只是为了更清楚地展示，并稍微规范化显示。 */
* { box-sizing: border-box; margin: 0; padding: 0; }
.page { width: 100px; border: 2px solid; }
/* 这是锁定在距离底部一定距离的盒子，这里假设距离底部30像素 */
.outer {
height: calc(100vh - 30px);
position: relative;
border: 1px solid blue;
}
/* 这是其中的可滚动容器 */
.inner {
height: 100%;
overflow: auto;
}



  

    

    内容 内容 内容 内容
    内容 内容 内容 内容
    内容 内容 内容 内容

需要注意的是，如果

的高度为30像素，并且底部需要留出10像素的间隙，那么calc()函数应为calc(100vh - 40px)。此外，滚动不起作用的原因是将overflow属性设置为hidden，而应该设置为auto。

0