Question

所以我使用css动画来变换覆盖整个页面区域的div的比例（按位置：绝对;左：0px;顶部：0px;右：0px;最小高度：100％; z -index：5;）。最小高度是因为div中有溢出，所以页面滚动，背景在div的整个长度上保持不变。

问题是当有溢出时，我将潜水从1缩放到.9时，当我滚动到页面底部时，div的底部仍会触及浏览器窗口的底部（没有边距）在底部），而当没有溢出时，div有一个很好的边缘，显示层的颜色低于它（这是位置：固定;左：0px;顶部：0px;右：0px;底部：0px ; z-index：1;）。

但是，如果你加载带有溢出的页面，而不是缩小它以创建溢出，它会在比例变化后在所有边上渲染边距。

我希望在溢出发生时所有情况下底部仍然有一个边距，我将如何实现这一目标？

Live example

enter image description here

以下是所有代码：

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

Answer 1

min-height不会对溢出做任何事情。将其更改为height属性并添加overflow-y：auto;到了内盒。

变换比例和高度100％

1 个答案: