css 缩放+溢出的唯一解决方案

Question

我想在可滚动窗格中以 0.5 的比例显示 html 未定义的宽度和高度。

所以我这样设计容器

.container {
 position:absolute;
 top:40px;
 left:40px;
 bottom:40px;
 right:40px; 
 overflow:scroll;
}

和内容

.content {
 transform:scale(0.5);
 transform-origin: top left;
}

问题是比例因子只会改变方块的外观，不会影响其内部容器。如果内容为 1000 x 2000，则在 0.5 比例下，可见区域为 500 x 1000，但其 "implicit" 容器仍为 1000 x 2000。

因此，如果我将其放入带有 overflow:scroll 的父容器中，那么一旦您超过 50%

，滚动条就会开始显示空内容

解决方法是什么？最好在 css。或者 javascript 如果这在纯 css.

中是不可能的

.content {
 transform:scale(0.5);
 transform-origin: top left;
}

.container {
 position:absolute;
 top:40px;
 left:40px;
 bottom:40px;
 right:40px; 
 overflow:scroll;
}

/* css behind does not matter */
span
{
 display:block;
 width:400px;
 height:400px;
 background-color:red;
 border:1px solid green;
}
span:nth-child(2n)
{
 height:300px;
 background-color:yellow;
}

<html>
<body>

<div class="container">
 <div class="content">

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span> 
    ...when zoomed there are empty space here under ...
    
 </div>
</div>

</body>
</html>

Answer 1

只需将 height:0 设置为 .content:

.content {
 transform:scale(0.5);
 transform-origin: top left;
 height: 0;
}

.container {
 position:absolute;
 top:40px;
 left:40px;
 bottom:40px;
 right:40px; 
 overflow:scroll;
}

/* css behind does not matter */
span
{
 display:block;
 width:400px;
 height:400px;
 background-color:pink;
 border:1px solid green;
}
span:nth-child(2n)
{
 height:300px;
 background-color:gold;
}

<html>
<body>

<div class="container">
 <div class="content">

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span> 
    ...when zoomed there are empty space here under ...
    
 </div>
</div>

</body>
</html>

css 缩放+溢出的唯一解决方案

css only solution for scaling + overflow

css

transform

overflow

scale