所以我使用 css 动画来转换覆盖整个页面区域的 div 的比例（按位置：绝对；左：0px；上：0px；右：0px；最小高度：100%；z-index： 5;)。最小高度是在 div 中溢出的情况下，因此页面滚动，并且背景在 div 的整个长度上保持不变。
问题是当溢出时，我将潜水从 1 缩放到 0.9，当我滚动到页面底部时，div 的底部仍然触及浏览器窗口的底部（底部没有边距), 而当没有溢出时, div 周围有一个很好的边距, 显示了它下面的图层颜色 (位置: 固定; 左: 0px; 上: 0px; 右: 0px; 下: 0px; z-指数：1；）。
但是，如果您加载带有溢出的页面，而不是缩小它以创建溢出，它会在比例更改后在所有侧面呈现边距。
当发生溢出时，我希望在所有情况下仍然有一个边距，我将如何做到这一点？
以下是所有代码：
<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>