html - 防止div溢出

Question

我正在创建一个水平动画页面转换系统，其中屏幕会缩放以适应传入页面。我遇到的问题是，当移动到较小的页面大小时，前一个(较大的)页面溢出我的内容包装器，因此导致我的整个页面延伸到页脚之外。 This屏幕截图显示了我的问题。

在屏幕缩小以容纳传入的较小页面后，您可以看到当前页面如何在左侧退出。 (黄色是页脚，白色是不需要的屏幕扩展)。

目前我的“页面”css 是

.myPage
{
width: 100%;
max-width: 100%;

margin-left: auto;
margin-right: auto;

position: absolute;

top: 0;
left: 0;
display:none; /*Pages are displayed once called*/
opacity: 1;
}

我曾尝试摆弄 overflow-y:hidden，我认为这可能有用，但没有这样的运气。

我能做些什么来防止我的页面类超出我的内容并搞砸我的页面？

编辑:

这是页面包装器。

.pageWrapper
{
background: #FF0000;
position: relative;
width: 100%;
height: 100%;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
-webkit-transform: translateX(0%);
}

编辑 2:A jsfiddle thats broken but features all my code

Answer 1

如果没有固定高度，

overflow-y 将无法工作。尝试将高度设置为 100% 或其他一些看起来正确的值。

在这种情况下，您还可以设置 bottom 而不是 height 来为元素提供固定高度。