Javascript 如何创建具有百分比高度的固定可滚动div？_Javascript_Html_Css

Javascript 如何创建具有百分比高度的固定可滚动div？

javascript html css

Javascript 如何创建具有百分比高度的固定可滚动div？,javascript,html,css,Javascript,Html,Css,我试图在一个可滚动的页面中间创建一个固定div，但是我不能正确地将div缩放到页面大小。它被设置为占据70%的页面（也就是说，从浏览器底部停止大约20px），但是当你降低浏览器的高度时，它似乎没有做出正确的反应我似乎不明白这是为什么，我怀疑这与固定定位一个div，然后尝试使用百分比高度有关，但我相信有办法解决这个问题为了理解我的意思，这里有一个示例网站。从底部向上拖动窗口，最终div不再调整大小：( div的CSS是： .singlepost { position: fixed; heigh

我试图在一个可滚动的页面中间创建一个固定div，但是我不能正确地将div缩放到页面大小。它被设置为占据70%的页面（也就是说，从浏览器底部停止大约20px），但是当你降低浏览器的高度时，它似乎没有做出正确的反应

我似乎不明白这是为什么，我怀疑这与固定定位一个div，然后尝试使用百分比高度有关，但我相信有办法解决这个问题

为了理解我的意思，这里有一个示例网站。从底部向上拖动窗口，最终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动态确定浏览器的高度，并将fixed with设置为特定的像素高度，但我怀疑这是解决此问题的最佳方法。

您的页面正在正确计算

.singlepost

div的高度。它始终为70%，并且在页面高度变小时会进行调整。

问题是，

.singlepost

div位于固定高度的某些内容之后。因此，当

.singlepost

div上方的内容大于页面高度的30%时，

.singlepost

div不会超出页面底部。但当您将页面高度减小时，顶部内容将小于30%此时，

.singlepost

div的底部将位于页面底部下方

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

CSS

.singlepost{
位置：固定；
背景色：白色；
左侧填充：10px；
右边填充：10px；
溢出x：隐藏；
顶部：270px；
底部：20px；
}

这假设您的顶部内容为270px高。