CODEWITHSUNDEEP
htmlcss
hOOks7
hOOks7

Reputation: 71

Prevent div from overflowing

I'm creating a horizontal animated page transition system where the screen scales to accomodate the incoming page. The problem I have is when moving to a smaller page size, the previous (larger) page overflows out of my content wrapper and consequently causes my overall page to extend past the footer. This screen capture shows my problem.

You can see how the current page exits on the left, after the screen has shrunk to accomodate the incoming smaller page. (the yellow is the footer, the white the unwanted screen extension).

Currently my "page" css is 

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

I've attempted fiddling with overflow-y:hidden which I thought might work but no such luck.

What can I do to keep my page class from extending out of my content and screwing up my page?

EDIT:

Here's the page wrapper.

.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

Upvotes: 0

Views: 97

Answers (1)

Dagg Nabbit
Dagg Nabbit

Reputation: 76776

overflow-y won't work without a fixed height. Try setting the height to 100% or some other value that looks right.

In this case you could also set bottom instead of height to give the element a fixed height.

Upvotes: 4

Related Questions