Question

我试图在可滚动的页面中间创建一个固定的div，但是我无法正确地将div缩放到页面大小。它设置为占用页面的70％（AKA，从浏览器底部停止大约20px）但是当你减少浏览器的高度时，它似乎没有正确反应。

我似乎无法弄清楚为什么会这样，怀疑它与固定定位div有关，然后尝试使用百分比高度，但我相信它有一种解决方法。

要了解我的意思，有一个示例网站here。从底部向上拖动窗口，最终div不再调整大小。：（

div的CSS是：

.singlepost {
position: fixed;
height: 70%;
background-color: white;
padding-left: 10px;
padding-right: 10px;
overflow-x: hidden;
}

HTML的结构是：

<div class="container">
    <div class="container">
     [This is the fixed width box I want to size]
    </div>
</div>

我的一个想法是使用javascript动态确定浏览器的高度，并将固定设置为特定的像素高度，但我怀疑这是解决此问题的最佳方法。

Answer 1

您的页面正在正确计算.singlepost div的高度。它始终为70％，并且在页面高度变小时进行调整。

问题是.singlepost div位于一些固定高度的内容之后。因此，当.singlepost div之上的内容大于页面高度的30％时，.singlepost div不会超出页面底部。但是，当您将页面高度设置得较小时，顶部内容会少于页面的30％，此时.singlepost div的底部将落在页面底部。

您可以设置顶部和底部，而不是设置高度：

<强> CSS

.singlepost {
    position: fixed;
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
    top: 270px;
    bottom: 20px;
}

这假设你的最高内容是270px高。

如何用百分比高度创建固定的，可滚动的div？

1 个答案: