【问题标题】:div scrollable with fixed div固定 div 可滚动的 div
【发布时间】:2017-02-26 22:28:37
【问题描述】:

我试图弄清楚如何根据旧索引设置一个基本的页面设置,该索引设置有一个固定的标题/导航栏 div,比如说 200px 高度。下面带有页面内容的第二个 div 应该是可滚动的,并且适合浏览器窗口内的剩余垂直空间。有什么建议吗?

【问题讨论】:

  • 欢迎来到 StackOverflow!听起来您只是在寻找position: fixed。为了让我们更好地帮助您,请更新您的问题,以便它在 minimal, complete, and verifiable example 中显示所有相关代码。还请务必让我们知道您迄今为止为解决问题所做的尝试。如需更多信息,请参阅help article,了解如何提出好的问题。

标签: html css scrollable


【解决方案1】:

overflow: hidden; 添加到您的CSS 部分,这将使div 不可滚动! overflow: auto; 使 Div 再次可滚动

示例: https://jsfiddle.net/v596fvbu/

【讨论】:

    【解决方案2】:

    您可以固定导航栏并让正文在其下方滚动:

    .navbar {
      height: 3em;
      width: 100%;
      position: fixed;
    }
    

    http://codepen.io/helb/pen/EWjPqJ

    或将页面高度限制为浏览器窗口大小并使第二个 div 可滚动:

    .page {
      overflow-y: scroll;
      height: calc(100vh - 3em); /* browser viewport height minus the navbar height */
    }
    

    http://codepen.io/helb/pen/NpqNxy

    注意滚动条位置的不同:

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-11-24
      • 1970-01-01
      • 1970-01-01
      • 2019-01-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多