使 DIV 不显示在其容器之外答案

【问题标题】：Make a DIV not be shown outside it's container使 DIV 不显示在其容器之外
【发布时间】：2013-06-04 16:09:19
【问题描述】：

我正在使用 JQuery 制作一个非常基本的动画。基本上我所拥有的是一个宽度为 60%、高度为 80% 的 DIV，它包含一本手册。我的目标是，当您浏览手册中的页面时，当前页面向上移动并消失，而下一页从底部出现。

我已经足够接近了，但是出了点问题，我不知道如何解决它 - 页面 DIV 在其容器外可见。他们的 top 属性设置为 110% 但我可以看到它没有生效。它们的位置仅受其上方的菜单表影响。

所以我的问题，真的是 - 我如何让一个 DIV 在它的容器之外不可见，但不改变整个 DIV 的可见性或显示，所以向上移动时会看到文本 - 但只有文本放在容器上，不在容器外面。

    .manualPage {
    color:rgba(241, 241, 241,1.0);
    top:110%;
    text-align:left;
    left:0%;
    cursor:default;
    z-index:30;
    font-family: "Open Sans", sans-serif;
    font-size:11pt;
    width:100%;
    height:100%;
}

.BigWindow {
    position:absolute;
    width:60%;
    height:80%;
    top:10%;
    display:inline-block;

    left:-70%;

    background-repeat:repeat;

    color:rgba(241, 241, 241,1.0);

    font-family: "Open Sans", sans-serif;
    font-size:12pt;

    text-align:center;

    cursor:default;

    z-index:30;
}

注意 BigWindow 是容器，manualPage 是页面。

这里是函数，但我认为CSS问题是首先要解决的问题：

var currentPage = -1;

function setManualPage(num) {
    if ($('#manualMenu').css('display') != 'none')
        $('#manualMenu').fadeOut(750);
    if (currentPage != -1) {
        $('#page' + currentPage).animate({ top: '-100%' }, screen.availHeight / 2, function () { $('#page' + currentPage).css('top', '110%'); });
    }

    if (num != -1)
        $('#page' + num).animate({ top: '0%' }, screen.availHeight / 2);
    currentPage = num;
}

【问题讨论】：

请提供 jdfiddle 或代码示例
@Lepidosteus 代码示例已添加

标签： jquery html asp.net css

【解决方案1】：

基本上这是通过添加 CSS 来完成的

overflow: hidden;

到封闭的容器，但看不到这里的代码，很难获得帮助。

【讨论】：

现在尝试将溢出隐藏添加到 BigWindow CSS 类。
好吧，这太糟糕了。它刚刚奏效。但似乎.manualPage 位置的唯一原因是菜单表。它的顶部并不是我设置的类中的 110%。
通过将类的位置设置为绝对来稍微修复。无论如何，@Axel Amthor，非常感谢你！无法相信有时一条线解决方案如何解决挫折！

【解决方案2】：

试试

 .manualPage{opacity:0}

或

.manualPAge{visibility:hidden}

这样，所有的年龄（#page1、#page2 等）都将不可见。

在动画期间，当您设置top 属性时，将opacity 设置为1 或visibility 设置为visible

另一种方法是设置包含窗口的overflow 属性：

          .BigWindow{overflow:hidden}

这样，任何超过.BigWindow高度的内容都不会显示

【讨论】：

不客气。当我开始打字时，这个问题没有答案。下次我会尽量快:)