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

我有一个水平滚动条，它只会在悬停时显示。但问题是当它显示时，它会增加容器的高度并将以下元素向下推。
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>

有一些规则:

包装器和一个高度不能固定，因为 *oneChild * 内容高度是未知的。两者的高度都是由他们的 child 决定的。

scroball 只在悬停时显示。你可以使用 js 或 css 来控制它是否可见。

欢迎使用任何 js/css 解决方案。

最佳答案

如果 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;
 }

关于javascript - 滚动条显示时如何 "fix"容器元素高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20390243/