0

したがって、css アニメーションを使用して、ページの領域全体をカバーする div のスケールを変換しています (位置による: 絶対; 左: 0px; 上: 0px; 右: 0px; 最小高さ: 100%; z-index: 5;)。min-height は、div でオーバーフローが発生した場合に備えているため、ページがスクロールし、背景は div の長さ全体で一定のままです。

問題は、IS オーバーフローがあり、ダイブを 1 から .9 にスケーリングすると、ページの下部までスクロールすると、div の下部がまだブラウザー ウィンドウの下部に接触することです (下部にマージンがありません) )、一方、ISN'T オーバーフローがある場合、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>
4

1 に答える 1

0

min-height は、オーバーフローに対しては何もしません。高さのプロパティに変更し、overflow-y: auto; を追加します。内箱へ。

于 2013-09-09T15:44:03.457 に答える