本文介绍了粘性页眉和页脚可滚动内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 我试图创建一个包含三个div的页面:页眉,页脚和内容区域。这些应该占用屏幕的100%。 页眉和页脚很小,不会改变,内容区域可以是任何尺寸,所以我添加了 overflow:auto ,当它变得太大时使它滚动。 问题是,它溢出了高度屏幕。我创建了一个小提琴演示: https://jsfiddle.net/tdxn1e7p/ 我使用下面的CSS设置html和body height,所以 height:100% 窍门 c $ c> html, body { height:100%; } 我的文档结构是: < div style =height:100%;> < div> 标题内容< / div> < div style =overflow:auto;> 正文内容...这可能很长< / div> < div> 页脚内容< / div> < / div> 我在这类问题上发现了很多变化,例如这个问题,但一直无法为我解决任何问题。 方法1 - flexbox 它适用于已知和未知高度元素。确保将外部div设置为 height:100%; 并重置保证金 >体。请参阅浏览器支持表。 jsFiddle html,body {height:100%; margin:0;}。wrapper {height:100%;显示:flex; flex-direction:column;}。header,.footer {background:silver;}。content {flex:1;溢出:自动;背景:粉红色;} < div class =wrapper > < div class =header>标题< / div> < div class =content> < div style =height:1000px;>内容< / div> < / DIV> < div class =footer>页脚< / div>< / div> 方法2 - CSS表格 对于已知和未知的高度元素。它也可以在包括IE8在内的传统浏览器中使用。 jsFiddle html ,身体{身高:100%; margin:0;}。wrapper {height:100%;宽度:100%; display:table;}。header,.content,.footer {display:table-row;}。header,.footer {background:silver;}。inner {display:table-cell;}。内容.inner {height:100 %;位置:相对;背景:粉红色;}。可滚动{position:absolute;左:0;正确:0; top:0;底部:0; overflow:auto;} < div class =wrapper > < div class =header> < div class =inner>标头< / div> < / DIV> < div class =content> < div class =inner> < div class =scrollable> < div style =height:1000px;>内容< / div> < / DIV> < / DIV> < / DIV> < div class =footer> < div class =inner>页脚< / div> < / div>< / div> calc() 如果页眉和页脚的高度是固定的,可以使用CSS calc() 。 jsFiddle $ b $ html,body {height:100%; margin:0;}。wrapper {height:100%;}。header,.footer {height:50px;背景:silver;}。content {height:calc(100% - 100px);溢出:自动;背景:粉红色;} < div class =wrapper > < div class =header>标题< / div> < div class =content> < div style =height:1000px;>内容< / div> < / DIV> < div class =footer>页脚< / div>< / div> 方法4 - 全部% 如果页眉和页脚是已知高度,并且它们也是百分比,那么您可以只进行简单的数学计算他们在一起的100%身高。 < div class =wrapper > < div class =header>标题< / div> < div class =content> < div style =height:1000px;>内容< / div> < / DIV> < div class =footer>页脚< / div>< / div> jsFiddle I'm trying to create a page which contains three divs: a header, a footer, and a content area. These should take up 100% of the screen.The header and footer are small and won't change, the content area could be any size, so I have added overflow:auto to make it scroll when it gets too large.The problem is, it overflows the height of the screen. I have created a fiddle to demonstrate:https://jsfiddle.net/tdxn1e7p/I'm using the following CSS to set up the html and body height, so the height:100% trick on the container will work:html,body { height: 100%;}The structure of my document is:<div style="height:100%;"> <div> Header content </div> <div style="overflow:auto;"> Body content... this could be very long </div> <div> Footer content </div></div>I have found a lot of variations on this sort of problem such as this question, but haven't been able to make any of the answers work for me. 解决方案 Approach 1 - flexboxIt works great for both known and unknown height elements. Make sure to set the outer div to height: 100%; and reset the default margin on body. See the browser support tables.jsFiddlehtml, body { height: 100%; margin: 0;}.wrapper { height: 100%; display: flex; flex-direction: column;}.header, .footer { background: silver;}.content { flex: 1; overflow: auto; background: pink;}<div class="wrapper"> <div class="header">Header</div> <div class="content"> <div style="height:1000px;">Content</div> </div> <div class="footer">Footer</div></div>Approach 2 - CSS tableFor both known and unknown height elements. It also works in legacy browsers including IE8.jsFiddlehtml, body { height: 100%; margin: 0;}.wrapper { height: 100%; width: 100%; display: table;}.header, .content, .footer { display: table-row;}.header, .footer { background: silver;}.inner { display: table-cell;}.content .inner { height: 100%; position: relative; background: pink;}.scrollable { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto;}<div class="wrapper"> <div class="header"> <div class="inner">Header</div> </div> <div class="content"> <div class="inner"> <div class="scrollable"> <div style="height:1000px;">Content</div> </div> </div> </div> <div class="footer"> <div class="inner">Footer</div> </div></div>Approach 3 - calc()If header and footer are fixed height, you can use CSS calc().jsFiddlehtml, body { height: 100%; margin: 0;}.wrapper { height: 100%;}.header, .footer { height: 50px; background: silver;}.content { height: calc(100% - 100px); overflow: auto; background: pink;}<div class="wrapper"> <div class="header">Header</div> <div class="content"> <div style="height:1000px;">Content</div> </div> <div class="footer">Footer</div></div>Approach 4 - % for allIf the header and footer are known height, and they are also percentage you can just do the simple math making them together of 100% height.html, body { height: 100%; margin: 0;}.wrapper { height: 100%;}.header, .footer { height: 10%; background: silver;}.content { height: 80%; overflow: auto; background: pink;}<div class="wrapper"> <div class="header">Header</div> <div class="content"> <div style="height:1000px;">Content</div> </div> <div class="footer">Footer</div></div>jsFiddle 这篇关于粘性页眉和页脚可滚动内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!