Question

感谢任何花时间阅读此问题的人。我真诚地希望我提供了一个脑筋急转弯，因为我已经搜遍了所有的解决方案，到目前为止，我已经躲过了。我是一个新手，并从这个网站获得了很多很棒的想法，所以我很抱歉这是一个简单的...

我正在尝试使用div作为顶部的菜单栏创建一个网页，一个124px高的div用于写帖子并通过ajax提交，而底部的div应该填充页面的其余部分并将显示所有帖子。

底层div是我遇到麻烦的地方。我希望所有3个div都能保持原样，页面不应该从底部滚动，所以菜单栏总是可见的，只有当div有大于div的大小时才会滚动底部div。

我将我尝试创建的内容转移到JSFIDDLE。任何建议都会非常感激。

HTML：

  <div id="chatWrapper">
    <div id="room">testroom</div>
    <div id="post">Msg writing area 124px high ...</div>
    <div id="mesg">Posts ...<br>
      1<br>
      2<br>
      3<br>
      4<br>
      5<br>
      6<br>
      7<br>
      8<br>
      9<br>
      10<br>
      11<br>
      12<br>
      13<br>
      14<br>
      15<br>
      16<br>
      17<br>
      18<br>
      19<br>
      20<br>
      21<br>
      22<br>
      23<br>
      24<br>
      25<br>
      26<br>
      27<br>
      28<br>
      29<br>
      30<br>
   </div>
</div>

CSS：

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
    background: #000000;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    line-height: 1.1em;
    color: #ffffff;
}

#before, #after {
    width: 98%;
    height: 4px;
    margin: 0 auto;
}

#topbar {
    width: 98%;
    height: 24px;
    margin: 0 auto;
}

#menuDiv {
    height: 24px;
    display: table-cell;
    vertical-align: middle;
    padding-left: 8px;
}

#menu-button {
    height: 24px;
    cursor: pointer;
}

#menu { display: none; overflow: hidden; }

#chatWrapper {
    width: 98%;
    min-height: 96%;
    height: 96%;
    margin: 0 auto;
    overflow: hidden;
}

#room { display: none; }

#post {
    width: 98%;
    height: 120px;
    overflow: hidden;
    margin: 0 auto;
}

#mesg {
    width: 98%;
    overflow: scroll;
    margin: 0 auto;
}

Answer 1

要将顶部栏保持在顶部，您可以使用position: fixed; top: 0;

查看您的更新小提琴：http://jsfiddle.net/jLe1552h/16/

position: fixed;表示容器应保持在其位置（相对于浏览器视口），不应受滚动影响。

top: 0;设置位置。它表示容器上边缘和浏览器视图边框之间的间距应为零。

您还可以将left，right和bottom用于其他方并合并这些值。

Alternatevly，您还可以查看HTML5的flexbox。

滚动底部div，菜单和帖子div固定

1 个答案: