粘性页眉和页脚可滚动内容 [英] Sticky header and footer scrollable content

问题描述

我试图创建一个包含三个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％身高。

< {身高：100％; margin：0;}。wrapper {height：100％;}。header，.footer {height：10％;背景：silver;}。content {height：80％;溢出：自动;背景：粉红色;}

 < 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 - flexbox

It 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.

jsFiddle

html, 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 table

For both known and unknown height elements. It also works in legacy browsers including IE8.

jsFiddle

html, 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().

jsFiddle

html, 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 all

If 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

这篇关于粘性页眉和页脚可滚动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！