隐藏 div 隐藏：溢出问题

Question

我有 2 个 div a & b 以及一个关闭和打开按钮（在单击关闭之前不会显示打开）。当我单击关闭时，div a 被隐藏并且 div b 的宽度被动画化为 100%。这可以按预期工作，直到我添加我需要的 html,body{height:100%} 以使所有内容都占用 100% 的可用浏览器高度。当我单击关闭 div b “闪烁”时，因为 jQuery animate 正在向其中添加 overflow:hidden。如果我将overflow:visible !important 添加到元素中，它会删除闪光灯，但不会以我想要的方式制作动画（从#content div 中删除height:100% 以查看所需的结果）。我怎样才能让我的动画不闪现而仍然达到预期的效果？

HTML

    <div id="content" style="height:100%">
    <div id="openBtn" style="background:aquamarine;display:none;top:0;position:absolute;left:0">Open</div>
    <div id="titleVidNavContainer" style="float:left;width:20%;position:relative;height:100%">
        <div id="videoTitleNav" style="min-height:100%; height:500px;background:purple;white-space: nowrap;">&nbsp;</div>       
        <div id="hideBtn" style="background:aquamarine; position:absolute;top:0;right:-35px;display:inline-block">Close</div>
    </div>
    <div id="videoContent" style="background:aqua;height:500px;width:80%;float:left;height:100%">&nbsp;</div>       
</div>

CSS

html,body{height:100%}

jQuery

         $("#hideBtn").click(function () {
            $(this).hide("slide", { direction: 'left' }, 200);
            setTimeout(function() {
                $("#titleVidNavContainer").animate({ width: '0' });
                $("#videoContent").animate({ width: '100%' }).css({ 'float': 'none' });
                $("#openBtn").show("slide", { direction: 'left' }, 500);
            },300);
        });

        $("#openBtn").click(function () {
            $(this).hide();
            $("#titleVidNavContainer").animate({ width: '20%' },400);
            setTimeout(function() { $("#hideBtn").show("slide", { direction: 'left' }, 200); },500);
            //setTimeout(function() { $("#videoContent").animate({ width: '80%' }).css('float', 'left'); },1000);
            $("#videoContent").css('float', 'left').animate({ width: '80%' });
        });

编辑：我最初选择不为此包含 jsFiddle，因为它并没有像我看到的那样复制问题。不管它可能有帮助 - jsfiddle.net/comatoseduck/KstHH

编辑 2： 这与我目前所获得的一样接近修复，尽管它仍然没有给我想要的结果 - jQuery .animate() forces style “overflow:hidden”

Answer 1

试试

html,body{margin: 0; padding: 0;}

而不是

html,body{height:100%}