Javascript 将滚动条放置在视口的底部

我正在做一个相当复杂的布局。有两个区域，红色和蓝色，必须同时垂直滚动，但右侧区域（蓝色）必须能够独立于其他区域水平滚动

我设法做到了，但是滚动条总是在

div的底部，我需要滚动条总是在视口的底部可见

有可能用HTML/CSS实现这一点吗？什么简单的JS或jQuery插件可以帮助解决这个问题

您不能仅使用CSS来实现它。但您可以使用JavaScript分离面板并同步它们：


var panel=document.querySelector（'.panel'）；
var content=document.querySelector（'.content'）；
var offset=panel.offsetWidth-panel.clientWidth；
content.style['left']=-offset+'px'；
content.style['width']=（content.offsetWidth+offset）+'px'；
content.style['float']='left'；
content.style['margin-right']=-offset+'px'；
content.addEventListener（'scroll'，函数（事件）{
panel.scrollTop=event.target.scrollTop；
});
panel.addEventListener（'scroll'，函数（事件）{
content.scrollTop=event.target.scrollTop；
});
html，
身体{
身高：100%；
填充：0；
保证金：0；
}
html{
最小高度：100%；
}
身体{
溢出：隐藏；
}
.集装箱{
高度：200px；
宽度：400px；
溢出：隐藏；
位置：相对位置；
}
.小组{
浮动：左；
背景：红色；
溢出：滚动；
身高：100%；
}
.内容{
位置：相对位置；
背景：蓝色；
溢出：滚动；
身高：100%；
}
.街区{
宽度：80px；
高度：80px；
利润率：10px；
背景：灰色；
}
.info{
宽度：1500px；
高度：80px；
利润率：10px；
背景：白色；
}
我终于找到了一个有助于我的布局的解决方案。这是塔拉斯·罗曼诺夫的回答和克里斯托夫的评论的混合，再加上


为了动态隐藏滚动条，计算滚动条的宽度，我使用

var blockset = document.querySelector('.blockset');
var vScrollWidth = blockset.offsetWidth - blockset.clientWidth
var panelWidth = $(blockset).outerWidth()

$(blockset).css("width", keysWidth + vScrollWidth)

块集位于面板内，在该代码之后，它比其容器宽一个滚动条的宽度，因此滚动条现在不可见

接下来，由于内容区域的底部滚动条增加了垂直滚动条的长度，我们还必须对此进行补偿

var content = document.querySelector('.content');
var hScrollHeight = content.offsetHeight - content.clientHeight;

$(blockset).css("padding-bottom", hScrollHeight)

我们正在添加内容水平滚动条的高度作为块集的填充。现在，当我们垂直滚动时，两边的高度将相同

最后，我们同步这些条，以便在一个部分上垂直滚动将在另一个部分上垂直滚动

$(content).scroll(function () {
    $(blockset).scrollTop($(content).scrollTop())
});

$(blockset).scroll(function () {
    $(content).scrollTop($(blockset).scrollTop())
});

一切都结束了。有两个部分同时垂直滚动，但有独立的水平滚动现在是可能的

一句警告：我正在使用边框框作为框大小。要使用另一个盒子大小，您必须更改许多内容。
您不能使用表格进行此操作吗？您正在寻找类似的吗？（又快又脏的样本！）@GeorgeLee你是什么意思？我想我会有同样的问题使用tables@Christoph我使用了你的代码，它可以正常工作，但是我对溢出属性的分发使它变得有点复杂。我更新的实现不允许从左面板滚动。今晚我将尝试这个解决方案。看起来不错，谢谢！