仅用于缩放 + 溢出的 css 解决方案答案

【问题标题】：css only solution for scaling + overflow仅用于缩放 + 溢出的 css 解决方案
【发布时间】：2018-07-13 16:04:05
【问题描述】：

我想在可滚动窗格中以 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，但其“隐式”容器仍为 1000 x 2000。

所以如果我把它放在一个带有溢出的父容器中：滚动然后滚动条开始显示空内容只要你通过 50%

解决办法是什么？最好在css中。或者如果这在纯 css 中是不可能的，则使用 javascript。

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

【问题讨论】：

但是容器的高度不是由内容定义的，而是由顶部/底部定义的
问题不在于容器的高度（如果您愿意，可以使用固定高度）。问题是滚动条的“高度”。它们的长度是必要长度的 2 倍，因为它们是基于缩放前孩子的高度。

标签： css overflow transform scale

【解决方案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>

【讨论】：

确实看起来可行。即使我不明白为什么。 100% in contant 是什么意思？ 100% 的容器？（看起来不是）所以这是显示 child 的 100% 必要空间？看起来很奇怪，但这正是它的样子。 IRL 跨度是 iframe，所以我会看看它是否仍在使用 iframe
@frenchone，我已经更新了我的答案，所以它不会将您与100% 混淆。溢出只会保留溢出的高度。
它只会增加更多的混乱；）