I'm currently facing an issue with CSS and I must admit that I am still in the learning process.
My goal is to have a header that remains at the top of the page, while the content area should be scrollable.
Below are the two CSS classes I've been working with:
.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>
Everything seems to work well with these settings. However, I recently added a dropdown menu to choose the scale of the "content" area because the content will be extensive.
Here is the additional CSS class I implemented to make the main div scale to 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;
}
When viewed at 100% scale (without the additional class), here’s how the page looks:
It's evident that the page has been scaled but is not utilizing the entire width of the screen. The scrollbars also do not span the entire width. Although I included "width: 100%" in the main class, removing it causes the scrollbars to disappear...
What I’m aiming for is to scale the main-div while keeping the width at 100% so that the image fills the entire screen. Additionally, I need the scrollbars due to the content exceeding the screen size, even with a 10% scale applied.
Is there a CSS wizard who can assist me with this challenge?