2

我正在尝试在可滚动的页面中间创建一个固定的 div，但我无法让 div 正确缩放到页面大小。它设置为占据页面的 70%（AKA，距离浏览器底部大约 20 像素），但是当您减小浏览器的高度时，它似乎没有正确反应。

我似乎无法弄清楚为什么会这样，怀疑它与固定定位 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 动态确定浏览器的高度并将固定设置为特定的像素高度，但我怀疑这是解决此问题的最佳方法。

4

1 回答 1

1

.singlepost您的页面正在正确计算 div的高度。它总是 70%，当页面高度变小时它正在调整。

问题是.singlepostdiv 位于一些固定高度的内容之后。所以当.singlepostdiv上面的内容大于页面高度的30%时，.singlepostdiv不超过页面底部。但是当你把页面高度变小时，顶部的内容会不到页面的 30%，此时.singlepostdiv 的底部将下降到页面的底部之下。

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

CSS

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

这假设您的热门内容是 270 像素高。

于 2013-08-05T04:07:20.800 回答