Question

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

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

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

Answer 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>

相关问题：Make fixed footer work with fixed header
演示：http://jsfiddle.net/virendrachandak/cF2Fv/show/

Answer 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

Answer 3

永远不要将i-frame用于网页结构，例如页眉页脚或其他任何内容。如果你想完成一个“粘性”标题，你需要使用正确的bootstrap代码固定到顶部。

<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/。

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

3 个答案: