Sticky header and footer scrollable content

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>

---

overflow: auto applies to the content inside the element. But the div currently has a fluid height, so its content never overflows it.

If you want the content div to scroll rather than overflow the page, you need to add a maximum height to it, like

<div style="max-height: 80%;">

This will make the div take up to 80% of the height of the page, but never more than that. Then you should probably also set the body to overflow: hidden to deal with the margins: Updated demo.

---

In Bootstrap 4.0, to have a fixed header and footer with scrolling content, wrap everything .container-fluid, as you likely are. Use .fixed-top and fixed-bottom class in your header and footer divs. Of course, you have to have enough content (overflow) so you can see it scrolling.

链接地址: http://www.djcxy.com/p/89408.html

上一篇: 适合包装到100％的宽度和高度

下一篇: 粘性页眉和页脚可滚动内容