This is what I'm trying to accomplish:
+--------screen-----------------------+
| ______________________ |*|
| |___static_header____| |*|
| | | |*|
| | content | |*|
| | scrollable | |*|
| | zoomable | |*|
| | | |*|
| | | |*|
+-------------------------------------+
The content is variable height, and I would like it to be zoomable and scrollable. The header should be static with fixed size ignoring the client's zoom level. I'm not sure I have seen this done before. My current code below still isn't right for scrolling: the scrollbar goes all the way up to the header and I would like it to stop at the edges of content both for zooming and for scrolling. Is this doable without using an iframe for the content section? It doesn't need to be CSS-only
body {
padding: 0;
}
.wrapper {
margin:0 auto;
width: 1000px;
}
.static {
width:1000px;
z-index:2;
height:100px;
position: fixed;
}
.header {
background-color: silver;
height:100px;
}
.content {
background-color: orange;
width:800px;
height:500px;
float: left;
position:relative;
top: 100px;
}<div class="wrapper">
<div class="static">
<div class="header">
Header
</div>
</div>
<div class="content">
Content
</div>
</div>You need to have a height on the parent, in this case the body for overflow: hidden; to work as expected. Then you can set the heights on the other elements, just ensure they don't exceed the 100% so there is no body overflow. See the changes below.
body,
html {
padding: 0;
height: 100%;
overflow: hidden;
}
.wrapper {
margin: 0 auto;
width: 90%;
height: 100%;
}
.static {
width: 100%;
z-index: 2;
position: sticky;
overflow: hidden;
}
.header {
background-color: silver;
height: 100px;
}
.content {
background-color: orange;
width: 80%;
height: 95%;
overflow-y: scroll;
position: relative;
}
.content-wrapper {
height: 2000px;
}<div class="wrapper">
<div class="static">
<div class="header">
Header
</div>
</div>
<div class="content">scroll this content only
<div class="content-wrapper"></div>
</div>
</div>