我如何在容器div中有一个带有固定页眉和页脚的可滚动主体？ 使用jQuery

Question

I have one container with two children elements inside of it. I want to place one child at the top and other child at the bottom of the container . The middle part (the content) should scroll between the top and bottom child elements.

I want both children elements inside the container to have a fixed position and the content should scroll without scrolling both top and bottom div.

I'd like a solution using CSS or jQuery, please. For a JSFiddle example, see my comment below.

Answer 1

I would like to add the below as a comment but because of low reputation I was unable to do it.

Take a look at the following jsfiddles:

1) http://jsfiddle.net/davidpauljunior/g2ydV/8/

2) http://jsfiddle.net/yASFU/

Style:

#content {
    width: 80%;
    margin: 0 auto;
    padding: 60px 0;
}

Answer 2

You could add another inner div to hold the content, and set overflow-y: scroll on it so that only the content will scroll and not the header and footer. Here is a modified version of your fiddle to illustrate this concept:

http://jsfiddle.net/jwnace/vtuv6wh6/

Answer 3

Just add position:fixed; to the necessary elements in the CSS. So the CSS should look something like:

  .inside {
    top: 2px;
    border: 1px solid #000;
    background-color: #000;
   color: #FFF;
   height:50px;
   position:fixed;

  }

  .inside2 {
    bottom: 2px;
    border: 1px solid #000;
    background-color: #000;
   color: #FFF;
   height:50px;
   position:fixed;
  }

Further read Updated fiddle to reflect the same.