不缩放/滚动的网页上的静态标题

Question

这就是我想要实现的目标：

+--------screen-----------------------+
|       ______________________      |*|
|       |___static_header____|      |*|
|       |                    |      |*|
|       |      content       |      |*|
|       |     scrollable     |      |*|
|       |      zoomable      |      |*|
|       |                    |      |*|
|       |                    |      |*|
+-------------------------------------+

内容是可变高度的，我希望它可以缩放和滚动。标头应该是静态的，大小固定，忽略客户端的缩放级别。我不确定我以前见过这样做。我下面的当前代码仍然不适合滚动：滚动条一直到标题，我希望它停在内容的边缘，无论是缩放还是滚动。在内容部分不使用iframe的情况下，这可行吗？它不需要是只有CSS的

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>

Answer 1

您需要在父级上有一个height，在这种情况下，overflow: hidden;的body才能按预期工作。然后，您可以设置其他元素的高度，只需确保它们不超过100%，这样就没有bodyoverflow。请参阅以下更改。

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>