CODEWITHSUNDEEP
javascripthtmlcss
user1200271
user1200271

Reputation: 142

Scrolling when using css scale

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.

Here are the two css classes:

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.

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;
        }

This is how the page look like in 100% scale (without the additional class)

This is the 100% scale page

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

This is the 10% scale image

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

Can some CSS god help me please?

Upvotes: 1

Views: 5385

Answers (1)

Frederik Witte
Frederik Witte

Reputation: 1345

This should do your effect:

JSFIDDLE

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.

Upvotes: 1

Related Questions