使内容在固定div之间负责

Question

所以这就是我现在所拥有的。红色标记的东西是固定的，因此它将保留在屏幕上。只有中间的内容实际上是可滚动的。

我目前在我的css中已经完成了所有这样的修复（带有3个游戏图标的右侧栏中的示例）：

＆＃13;

＆＃13;

                 margin-top: 102px;
    right: 0;
    position: fixed;
    height: 100%;
    width: 123px;

＆＃13;

＆＃13;

＆＃13;

我的内容基本上只是一个固定的尺寸，左边距离 看起来很好，对吗？我的问题是，如果中间内容不可滚动（例如没有游戏），右侧的滚动条消失，显然会出现间隙。

我怎样才能使这个负责，所以它适合每次？

Answer 1

您可以使用jQuery检测浏览器窗口的宽度，减去左右区域，并将内容区域的宽度设置为剩余值。

$(document).ready(function(){
    var windowWidth = $(window).width();
    var rightColumnWidth = 80;
    var leftColumnWidth = 250;
    var contentColumn = windowWidth - rightColumnWidth - leftColumnWidth;

    $("#idOfContentArea").width(contentColumn);
});

Answer 2

只是尝试从内容中删除宽度规则，并将其左右边距等于侧边栏的宽度。
内容的宽度应根据侧边栏之间的间距进行相应调整。

这是一个完整的css解决方案，不需要jQuery。