transform scale and height 100%
Question
So I am using css animation to transform the scale of a div that covers the entire area of the page (by position: absolute; left: 0px; top: 0px; right: 0px; min-height: 100%; z-index: 5;). The min-height is incase there is overflow in the div, so the page scrolls, and the background stays constant the entire length of the div.
The issue is that when there IS overflow, and I scale the dive from 1 to .9, the bottom of the div still touches the bottom of the browser window when I scroll to the bottom of the page (there is no margin at the bottom), whereas when there ISN'T overflow, the div has a nice margin all around that shows the layer's color bellow it (which is position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1;).
HOWEVER, if you load the page with overflow, instead of shrinking it to create overflow, it renders margins on all sides after the scale changes.
I would like there to still be a margin at the bottom in ALL CASES when overflow occurs, how would I accomplish this?
Here is all of the code:
<html>
<head>
<title>Shrink Wrap</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#gbx_outside {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgb(60,60,60);
z-index: 1;
}
#gbx_box {
position: absolute;
display: block;
left: 0px;
top: 0px;
right: 0px;
min-height: 100%;
background: rgb(255,255,255);
scale: .9;
z-index: 5;
transform: scale(.9);
}
.gbx_boxShrink {
-webkit-animation: gbx_boxShrink 300ms linear;
-moz-animation: gbx_boxShrink 300ms linear;
-ms-animation: gbx_boxShrink 300ms linear;
-o-animation: gbx_boxShrink 300ms linear;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
box-shadow: 0px 10px 20px rgb(0,0,0);
}
@-webkit-keyframes gbx_boxShrink {
0% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(.9); }
}
@-moz-keyframes gbx_boxShrink {
0% { -moz-transform: scale(1); }
100% { -moz-transform: scale(.9); }
}
@-ms-keyframes gbx_boxShrink {
0% { -ms-transform: scale(1); }
100% { -ms-transform: scale(.9); }
}
@-o-keyframes gbx_boxShrink {
0% { -o-transform: scale(1); }
100% { -o-transform: scale(.9); }
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="gbx_box" class="gbx_boxShrink">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed elit felis. Maecenas ut magna eget sem elementum semper eu at purus. Pellentesque odio augue, mollis vel cursus ut, egestas nec lacus. Nulla at magna a ipsum posuere euismod eget vel ligula. Nunc tincidunt, ipsum ac lobortis sollicitudin, diam quam vehicula sem, et tincidunt massa enim ac odio. Sed eros mi, consectetur ut blandit id, placerat non sem. Phasellus tristique bibendum dictum. Pellentesque et arcu vitae nisi luctus vehicula. Etiam pretium porttitor urna sed fringilla. Morbi interdum luctus quam eu ornare. Quisque vehicula est vel lectus tincidunt suscipit laoreet diam sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus faucibus nunc vitae nunc molestie quis dictum dolor malesuada. Cras pulvinar, felis non aliquam pharetra, enim orci lacinia velit, id dapibus leo risus vel nisi. Aliquam eget neque tortor. Cras sit amet nulla velit, sit amet vehicula nibh.
Praesent bibendum, magna viverra faucibus eleifend, odio dui mattis sapien, auctor rutrum orci arcu in urna. Ut et elit mi, nec tincidunt quam. Morbi venenatis lectus quis turpis interdum et consectetur eros tristique. Pellentesque a lectus sapien. Nullam sagittis dictum blandit. Donec elementum, velit a interdum gravida, magna dolor euismod elit, vel tincidunt dui lorem eget tortor. Vivamus nec massa orci. In hendrerit erat a leo pretium at volutpat ante condimentum. Proin nunc risus, dictum at condimentum sed, scelerisque quis nulla. Donec tristique nunc eget elit suscipit eu fermentum odio semper. Donec sed mi in sem ultricies hendrerit ac a nunc. Suspendisse fringilla massa sit amet massa ultricies iaculis tincidunt lacus euismod. Vestibulum volutpat pulvinar pretium. Pellentesque cursus pharetra erat a cursus.
Suspendisse potenti. Pellentesque rhoncus porttitor dui, at tempus ligula dictum ac. Fusce in justo at tortor pretium lacinia. Cras eu nulla ut turpis molestie aliquet sed iaculis enim. Mauris in rhoncus erat. Praesent nec arcu quis tellus dapibus imperdiet. Nunc pellentesque iaculis ipsum ut adipiscing. Duis placerat placerat orci faucibus aliquet. Proin in nisl massa, vitae accumsan libero. Integer cursus, arcu quis dignissim consectetur, orci magna elementum neque, in varius purus nunc eu tortor. Integer non massa diam, nec vulputate risus. Ut nec velit metus.
Ut vulputate aliquet porttitor. Donec nec augue eros. In hac habitasse platea dictumst. Nunc lorem augue, vehicula in condimentum non, commodo eu libero. Morbi erat elit, vehicula ac sodales at, sollicitudin scelerisque ante. Fusce blandit, arcu eget ultrices lobortis, eros enim fermentum magna, a consectetur dui velit id metus. Sed tempus, magna id ornare facilisis, purus tortor volutpat dui, porta aliquet urna neque ac diam. Aenean vel turpis et mauris pulvinar volutpat quis ut magna.
Praesent ut dignissim urna. Quisque malesuada elementum lorem, quis tempus neque semper vitae. Fusce vulputate pulvinar rhoncus. Nam sit amet bibendum augue. Aenean tempus gravida orci. Ut eget diam ut ante rhoncus consectetur. Vivamus placerat feugiat enim, at mattis enim fermentum vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris erat urna, adipiscing at auctor et, sodales vel orci.</div>
<div id="gbx_outside"></div>
</body>
</html>
1 answers
solution1
0 2013-09-09 15:44:03
min-height won't do anything for overflow. Change it to a height property and add overflow-y: auto; to the inner box.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.