有很多固定的页脚/页眉可变宽度的内容,但似乎都不适用于我的特定用例。
描述我想要的最简单方法是使用google doc的样式界面,其中页眉和页脚是固定的,内容是X / Y可滚动的,但是当您开始向下滚动时,页眉的一部分会滚开
https://jsfiddle.net/zve0mb5m/
HTML, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
div {
padding: 10px;
}
.header {
background: LightCoral;
border: 10px solid IndianRed;
}
.fixed-header {
position: sticky;
top: 0px;
background: Gold;
border: 10px solid GoldenRod;
}
.content {
overflow-y: scroll;
overflow-x: scroll;
height: 100%;
background: YellowGreen;
border: 10px solid OliveDrab;
}
.fixed-footer{
position: fixed;
bottom: 0px;
background: LightSteelBlue;
border: 10px solid SteelBlue;
width: 100%;
}
<div class="header">
<h1>Non fixed header content</h1>
</div>
<div class="fixed-header">
Fixed header content
</div>
<div class="content">
Some content that will overflow horizontally aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="fixed-footer">
Fixed footer content
</div>
到目前为止,上面的小提琴是我目前所掌握的,在一个可行的解决方案中,绿色内容部分的边框会出现在蓝色页脚的正上方,这将允许显示水平滚动条。
同样,在滚动时,内容部分位于固定标题的下面,这是不理想的。我希望内容部分在任何时候都是完全可见的,并随着滚动而增长。可以用CSS吗?我这里需要一些JS吗?
最佳答案
您可以将固定项目包装在容器div
中,并使用flexbox对其进行布局:http://jsfiddle.net/38m5d13r/