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;
}

我试图摆弄溢出的东西：隐藏的，我觉得可能有效，但没有这样的运气。

如何防止我的网页课程延伸到我的内容并搞砸我的网页？

编辑：

这是页面包装器。

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

Edit2：A jsfiddle thats broken but features all my code

Answer 1

没有固定高度，

overflow-y将无效。尝试将高度设置为100％或其他看起来正确的值。

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

防止div溢出

1 个答案: