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>

有一些规则：

包装器和一个高度无法修复，因为* oneChild * 内容高度是unkonwn。两者的高度都由他们的孩子决定。
scroball仅在悬停时显示。您可以使用js或css来控制它是可见的。
欢迎任何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;
 }

Answer 2

如果一个孩子的孩子永远不会改变，那么你可以在设定一个高度后得到该元素的高度，然后将其固定在那个高度。

var $one = $('.one');
var height = $one.height();

$one.css('height', height);

如果一个孩子的高度可能会发生变化，您可以在将鼠标悬停在元素上时固定高度，并在停止悬停时将其设置为自动。

var $one = $('.one');
var height = $one.height();

$one.on('mouseenter', function() {
    $one.css('height', height);
});

$one.on('mouseleave', function() {
    $one.css('height', 'auto');
});

Answer 3

当滚动条不存在时，您可以将悬停时div的高度设置为高度。假设jQuery没问题：

$(document).ready(function() {
    var oneHeight = $('.one').height();
    $('.one').hover(
         function(){ $(this).height(oneHeight); },
         function(){ $(this).height(oneHeight); }
    );
});

这确实添加了一个不幸的垂直滚动条，但是如果你想让垂直位置保持不变，你需要使用垂直条来查看水平滚动条的内容。

Answer 4

我的解决方法是：首先添加padding-bottom，它与水平scroball一样高，然后当mouseover事件发生时，padding-bottom设置为零。

滚动条显示时如何“修复”容器元素高度？

4 个答案: