如何在html页面中获得部分滚动条？答案

【问题标题】：How to get partial scroll bar in html page?如何在html页面中获得部分滚动条？
【发布时间】：2014-03-29 04:44:08
【问题描述】：

我在我的项目中使用 Bootstrap，并且我的主页中有导航栏。我希望滚动条完全显示在下面的链接中。

http://www.little-neko.com/switcher/?theme=FatCatz 滚动条不应出现在导航/顶部栏的位置，它应该从其余内容开始。

请告诉我，如何应用 css 样式来获得部分滚动条，如上面的链接所示。我使用 css 样式“body { overflow: hidden }”隐藏了滚动条，但无法将滚动条放在子 DOM 节点（div 元素）中。

【问题讨论】：

链接的网站是你的吗？还是别人的？请在此处发布您的代码，以便我们直接解决您遇到的困难。
你为什么不使用开发者工具看看你提到的网站是如何达到效果的？
不，它不是我的网站。我希望滚动条完全显示在链接中。
我对 CSS 很陌生，我不太了解。请帮助我实现我的目标。
我认为你应该在谷歌上搜索 fixed header 而不要走这种 iframe 式的路线。

标签： html css twitter-bootstrap

【解决方案1】：

这是一个 iframe，现在不推荐了。

<html>
    <head>
        <style>
            .fixed{
                z-index: 99999; //some very high value
                position: fixed;
            }
        </style>
    </head>
    <body>
        <div class="fixed">Fixed Content</div>
        <iframe src="anyURL" frameborder="0" width="100%"></iframe>
    </body>
</html>

【讨论】：

您能否建议实现目标的最佳方法？
http://jsfiddle.net/virendrachandak/cF2Fv/show/ 在http://stackoverflow.com/questions/21617198/make-fixed-footer-work-with-fixed-header 有一个很好的演示和解释

【解决方案2】：

我已经通过使用以下示例解决了我的问题：

*
{
    margin: 0;
    padding: 0;
}

html, body, .Container
{
    height: 100%;
}

    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }

.Header
{
    margin-bottom: 10px;
    background-color: #6ea364;
}
.Content
{
    position: relative;
    z-index: 1;
}
    .Content:after
    {
        content: '';
        clear: both;
        display: block;
    }

.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}
    .Wrapper > div
    {
        height: 100%;
    }

.LeftContent
{
    background-color: purple;
    overflow: auto;
}

.RightContent
{
    background-color: orange;
    float: right;
    margin-left: 10px;
}

http://jsfiddle.net/avrahamcool/QMsuD/

Half fixed, half scrollable layout that can be scrolled... CSS

【讨论】：

【解决方案3】：

切勿将 i-frame 用于网站结构，例如页眉页脚或与此相关的任何内容。如果你想完成一个“粘性”标题，你需要使用正确的引导代码来固定到顶部。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
...
    </div>
</nav>

您可以在 www.getbootstrap.com 上准备更多相关信息，也可以在此处查看代码，看看他们是如何实现的。

 <!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

您可以在此处查看工作示例 http://getbootstrap.com/examples/navbar-fixed-top/。

【讨论】：