Question

我有一个容器，里面有两个子元素。我想在容器底部放置一个孩子，在容器底部放置另一个孩子。中间部分（内容）应在顶部和底部子元素之间滚动。

我希望容器内的两个子元素都有一个固定的位置，内容应滚动而不滚动顶部和底部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，以便只有内容会滚动而不是页眉和页脚。这是你的小提琴的修改版本来说明这个概念：

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

Further read 更新了fiddle以反映相同内容。

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

3 个答案: