84  

Something like this

像这样的东西

31  

If you're targeting browsers supporting flexible boxes you could do the following.. http://jsfiddle.net/meyertee/AH3pE/

如果您的目标是支持灵活方框的浏览器，您可以执行以下操作：http：//jsfiddle.net/meyertee/AH3pE/

HTML

HTML

    
Header
    
Body
    

CSS

CSS

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

header {
    flex-shrink: 0;
}
.body{
    flex-grow: 1;
    overflow: auto;
    min-height: 2em;
}
footer{
    flex-shrink: 0;
}

Update:
See "Can I use" for browser support of flexible boxes.

更新：请参阅“我可以使用”以获得灵活方框的浏览器支持。

19  

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.

它适用于已知和未知的高度元素。确保将外部div设置为高度：100％;并重置身体上的默认边距。请参阅浏览器支持表。

jsFiddle

的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;
}

  
Header
  

    
Content
  
  
Footer

Approach 2 - CSS table

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

对于已知和未知的高度元素。它也适用于包括IE8在内的传统浏览器。

jsFiddle

的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;
}

  

    
Header
  
  

    

      

        
Content
      
    
  
  

    
Footer
  

Approach 3 - calc()

If header and footer are fixed height, you can use CSS calc().

如果页眉和页脚是固定高度，您可以使用CSS calc（）。

jsFiddle

的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;
}

  
Header
  

    
Content
  
  
Footer

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.

如果页眉和页脚是已知高度，并且它们也是百分比，您可以只进行简单的数学计算，使它们在100％高度。

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 10%;
  background: silver;
}
.content {
  height: 80%;
  overflow: auto;
  background: pink;
}

  
Header
  

    
Content
  
  
Footer

jsFiddle

的jsfiddle

3  

As of 2013: This would be my approach. jsFiddle:

截至2013年：这将是我的方法。的jsfiddle：

HTML

HTML

    
Header (fixed)



    

        
Main Content
    
 

SCSS

SCSS

// User reset

* { // creates a natural box model layout
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} // asume normalize.css


// structure

.container {
    position: relative;
    width: 100%;
    float: left;
    padding: 1em;
}


// type

body {
    font-family: arial;   
}

.main-content {
    h1 {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: .2em;
    }
} // .main-content


// style

    // variables
    $global-header-height: 8em;
    $global-footer-height: 6em;

.global-header {
    position: fixed;
    top: 0; left: 0;
    background-color: gray;
    height: $global-header-height;
}

.main-content {
    background-color: orange;
    margin-top: $global-header-height;
    margin-bottom: $global-footer-height;
    z-index: -1; // so header will be on top
    min-height: 50em; // to make it long so you can see the scrolling
}

.global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: $global-footer-height;
    background-color: gray;
}

3  

Here's what worked for me. I had to add a margin-bottom so the footer wouldn't eat up my content:

这对我有用。我不得不添加一个边距底部，以便页脚不会吃掉我的内容：

header {
  height: 20px;
  background-color: #1d0d0a;
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hide;
}

content {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  margin-top: 20px;
  overflow: auto;
  width: 80%;
}

footer {
  position: fixed;
  bottom: 0px;
  overflow: hide;
  width: 100%;
}