使用CSS缩放时滚动 [英] Scrolling when using css scale
问题描述
我有一个css的问题，我不得不承认我只是在学习它。
I have a problem with css and I have to admit that I am just learning it.
我有一个标题在顶部和一个内容
I have a header that stays at the top and a "content" area that should be scrollable.
以下是两个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>
现在我添加了一个下拉列表来选择内容区域的比例，因为内容将很大。
This works fine though. Now I added a drop down to select the scale of the "content area" because the content will be quite large.
这是我添加到主要的CSS类div的缩放比例为10％：
This is the CSS class that I add to the main div to have the scale of 10%:
.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％ ）
This is how the page look like in 100% scale (without the additional class)
正如您所看到的，页面是缩放的，但不是使用屏幕的整个宽度。此外，滚动条不使用整个宽度...我想要主页使用全宽，这就是为什么我在主类中使用width：100％语句。我试图删除语句但是滚动条丢失...
As you can see the page is scaled but is not using the whole width of the screen. Also, the scrollbars do not use the whole width... I want the main page to use the full width thats why I used the "width: 100%" statement in the main class. I tried to remove the statement but then the scrollbars are missing...
我想要的是缩放主div，但保留宽度为100％整个屏幕。我也想要滚动条，因为内容仍然会大于屏幕 - 即使有10％的规模。
What I want is to scale the main-div but leave the width at 100% so that the image uses the whole screen. Also I want scrollbars because the content will still be larger then the screen - even with a scale of 10%.
有些CSS上帝可以帮助我吗？
Can some CSS god help me please?
推荐答案
这应该会产生效果：
您只需将内容封装在另一个容器中，并将此容器在您的主要区域。那么你不是你的主要区域，而是你的内容。
You simply have to wrap your content in another container, and you place this container in your main area. Then you scale not your main area, but just your content.
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>
添加悬停状态只是为了演示。
Added a hover state just for demonstration.
这篇关于使用CSS缩放时滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
