Javascript CSS3百分比值不使用已调整大小的视口，而是使用旧视口大小

我有一个元素，它有一个动画，从屏幕边缘的底部弹出，然后在循环中向下弹出（虽然不是完全向下）。下面的代码对此非常有用。然而，有一个问题。当浏览器全屏显示时，百分比将显示旧视口大小而不是新视口大小…使百分比消失。我能做些什么？如果有办法，我也会编写原始javascript

#chronoPopUp {
    font-family: verdana, arial, helvetica, sans-serif;
    background-color: white;
    display: block;
    width: 1300px;
    height: 37%;
    position: absolute;
    z-index: 9;
    margin-top: 661px;
    margin-left: 60px;
    -webkit-animation: slideUp 1s linear;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: none;
}

#chronoPopDown {
    -webkit-animation: slideDown 1s linear;
}

@-webkit-keyframes slideDown {
        0% { -webkit-transform: translateY(0%); }
        100% { -webkit-transform: translateY(75%); }
}

@-webkit-keyframes slideDownAllTheWay {
        0% { -webkit-transform: translateY(0); }
        100% { -webkit-transform: translateY(100%); }
}


@-webkit-keyframes slideUp {
        0% { -webkit-transform: translateY(75%); }
        100% { -webkit-transform: translateY(0%); }
}

HTML:

---

更新：请参见示例。点击F11全屏模式将显示它不会像退出全屏模式一样向下滑动到相同的级别。

您正在哪个浏览器中发送文本？如果IE有问题，并且您正在使用外部样式表，请尝试将其添加到

中的

。 这可能适用于其他浏览器

<link rel='stylesheet' type='text/css' href='/nameofstylesheet.css?v=2'>

---

请参阅，只需在

的

href

中添加版本查询，确保元素的容器随窗口调整大小，记住百分比是相对于容器的。当按F11键使浏览器进入全屏模式时，这实际上被认为是对视口的调整大小吗？我尝试了高度：37%是元素的像素，但仍然没有动态调整大小。你能显示你的css和html吗？这是Chromium的最新版本。仍然没有成功。我正在使用chrome作为我的浏览器。我可以看看小提琴并在Chrome32上测试它吗？它在Chrome32上的JSFIDLE上工作得非常好。你只需要向下滚动一点。不过，那不是你想要的。您希望它位于页面顶部的75%。此外，在小提琴中敲击F11只会全屏显示整个小提琴窗口，而不是结果/输出。我将尝试在本地HTML文件中运行您的代码。编辑我找到了一种全屏运行的方法。它会有动画，但不会到达顶部的75%。我知道这个问题。百分比始终应用于浏览器窗口/视口的大小，而不是

的高度。因此，如果页面高度为

200%

，则应将

translateY（）

设置为

150%

。检查我的。这可能太晚了，无法帮助您，但请尝试使用新的CSS3响应式

vw

（视口宽度）和

vh

（视口高度）单位。比如说像这样。因此，请尝试

75vh

var chronoListViewDisplay = function() {
    var displayActive = true;
    var toggleStatus = true;
    var rotationAutomationSteps = [];
    var automatedRotationTimer;

    function toggleChronoListView(slideDown) {
        var element = document.getElementById("chronoPopUp");
        slideDown = typeof slideDown !== "undefined" ? slideDown : "slideDown";
        console.log(slideDown);
        if (toggleStatus) {
            element.style.webkitAnimation = slideDown + " 1s linear forwards";
            toggleStatus = false;
        } else {
            element.style.webkitAnimation = "slideUp" + " 1s linear forwards";
            toggleStatus = true;
        }
    }

    function rotationEngine() {
        console.log("hi");
        //always start with a slide up
        rotationAutomationSteps[0] = setTimeout(toggleChronoListView, 2000);
        toggleStatus = false;
        rotationAutomationSteps[1] = setTimeout(toggleChronoListView, 4000);
    }


    function runAutomatedRotation() {
        rotationEngine();
        automatedRotationTimer = setInterval(rotationEngine, 4000);
    }

    return {
        toggleChronoListView : toggleChronoListView,
                             toggleStatus: toggleStatus,
                             runAutomatedRotation: runAutomatedRotation,
    }

}();

<link rel='stylesheet' type='text/css' href='/nameofstylesheet.css?v=2'>