我如何在容器div中有一個帶有固定頁眉和頁腳的可滾動主體？ 使用jQuery

Question

我有一個容器，其中有兩個子元素。 我想將一個孩子放在容器的頂部，另一個孩子放在容器的底部。 中間部分（內容）應在頂部和底部子元素之間滾動。

我希望容器內的兩個子元素都具有固定的位置，並且內容應滾動而不滾動top和bottom div。

我想要一個使用CSS或jQuery的解決方案。 對於JSFiddle示例，請參閱下面的評論。

Answer 1

我想添加以下內容作為評論，但由於聲譽低下，我無法做到這一點。

看一下以下jsfiddles：

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

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

樣式：

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

Answer 2

您可以添加另一個內部div來容納內容，並設置overflow-y: scroll在其上overflow-y: scroll ，以便僅滾動內容，而不滾動頁眉和頁腳。 這是您的小提琴的修改版本，用於說明此概念：

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

Answer 3

只需添加position:fixed; 到CSS中的必要元素。 因此CSS應該看起來像：

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

進一步閱讀更新的小提琴以反映相同的意思。