javascript - 滚动条显示时如何设置 "fix"容器元素高度？

Question

我有一个水平滚动条，它只会在悬停时显示。但问题是当它显示时，它会增加容器的高度并将以下元素向下推。 the demo examle .你可以看到当滚动条显示

时两个 div会被下推

<div class="wrapper">
<div class="one">
    <div class="oneChild">the height is unknown,the height is unknown,the height is unknown,the height is unknown</div>
</div>
<div class="two">I'm two</div>

有一些规则:

1. wrapper 和 one height 无法固定，因为 *oneChild * content height 是未知的。两者的高度都由他们的 child 决定。

2. 滚动球只在悬停时显示，可以使用js或css控制滚动球是否可见。

3. 欢迎任何 js/css 解决方案。

Answer 1

如果 jquery 是一个选项:

$(document).ready(function() {
    height = $('.one').height();
    $('.two').css('marginTop', height + 'px');
});

CSS:

.one {
     width: 100px;
     border: 1px seagreen solid;
     position:relative;
 }
 .one:hover {
     overflow: scroll;
 }
 .two {
     position: absolute;
     top:30px;
 }