使用 css scale 时滚动答案

【问题标题】：Scrolling when using css scale使用 css scale 时滚动
【发布时间】：2021-12-16 14:42:26
【问题描述】：

我对css有问题，我不得不承认我只是在学习它。

我有一个位于顶部的标题和一个可以滚动的“内容”区域。

这是两个 css 类：

body,
        div {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        #header {
            overflow: auto;
            position: absolute;
            width: 100%;
            height: 200px;
            background-color: #DEE7F2;
            border-width: 2px;
            border-bottom-width:2px;
            border-bottom-color:Black;
            border-bottom-style: solid;
        }

        #main {
            overflow: auto;
            position: absolute;                
            top: 200px;
            width: 100%;
            bottom: 0;                
        }

<body>
    <div id="header">
        some stuff here
    </div>
    <div id="main">
        a lot of stuff here
    </div>
<body>

虽然这很好用。现在我添加了一个下拉菜单来选择“内容区域”的比例，因为内容会很大。

这是我添加到主 div 以具有 10% 比例的 CSS 类：

.scale10 {
            -ms-transform: scale(0.1);
            -moz-transform: scale(0.1);
            -o-transform: scale(0.1);
            -webkit-transform: scale(0.1);
            transform: scale(0.1);
            -ms-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            -o-transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }

这是页面在 100% 比例下的样子（没有额外的类）

如您所见，页面已缩放，但并未使用屏幕的整个宽度。此外，滚动条不使用整个宽度......我希望主页使用整个宽度，这就是我在主类中使用“宽度：100％”语句的原因。我试图删除该语句，但滚动条不见了......

我想要的是缩放主 div，但将宽度保持为 100%，以便图像使用整个屏幕。我还想要滚动条，因为内容仍然会比屏幕大 - 即使比例为 10%。

哪位大神能帮帮我吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

这应该可以达到你的效果：

JSFIDDLE

您只需将内容包装在另一个容器中，然后将该容器放置在您的主要区域中。然后你扩展的不是你的主要区域，而是你的内容。

body,
html {
  height: 100%;
}

#main {
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: auto;
}

.content {
  width: 500px;
  height: 400px;
  margin: 0 auto;
  background-color: white;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}

.content:hover {
  width: 120%;
}

<div id="main">
    <div class="content"></div>
</div>

添加了一个悬停状态只是为了演示。

【讨论】：

没问题，如果您需要更多帮助，请随时询问。