Question

我正在使用Bootstrap Twitter并设计了一个带有固定导航栏和页脚的流畅布局。但是我仍然需要一个100％高度的固定左侧边栏和一个必要时滚动的内容区域。

我想使用浏览器的默认垂直滚动条，我的意思是，我不想在我的内容div中使用overflow-y。我在一些HTML5网站上看到了这一点，我也想这样做。

你能帮助我吗？

以下是我正在使用的代码：http://jsfiddle.net/julianonunes/AhK3c/2/embedded/result/

<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner"> <a class="brand" href="#">
                Texto</a>

        <ul class="nav pull-right">
            <li><a href="#">Dashboard</a>
            </li>
            <li class=""><a href="#">Link</a>
            </li>
        </ul>
    </div>
</div>
<!-- Begin page content -->
<div class="container-fluid no-padding header-margin">
    <div class="row-fluid">
        <div class="span2">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    <li class="nav-header">Sidebar</li>
                    <li class="active"><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="span10">
            <div class="panel-middle-top">
                <div class="middle-top-left"></div>
                <div class="middle-top-center">
                    <ul class="breadcrumb" style="background-color: transparent;">
                        <li><a href="/">Home</a>  <span class="divider">/</span>
                        </li>
                        <li class="active">Link</li>
                    </ul>
                </div>
                <div class="middle-top-right"></div>
            </div>
            <div class="panel-middle-content"></div>
        </div>
    </div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
    <p class="muted credit">Copyright <a href="#">Site</a> 2013.</p>
</div>
</div>

感谢。

Answer 1

您的页脚未固定...而是在内容较短（“粘性”）时推到页面底部。要使其实际修复，您需要使其具有以下内容：

  position:fixed;
  width:100%;
  bottom:0;

和侧边栏可以做到这样的事情，它总是跨越固定的页眉和页脚（使用top和bottom，你可以在这里使它跨越你想要的方式）：

  .sidebar-nav {
      position:fixed;
      top:52px;
      bottom:52px;
      width:12%;
  }

here is an update to your jsfiddle

注意：当位置设置为fixed时，元素的位置与absolute类似（因此您可以通过定义{{1}来设置其边界/跨度}}，top，bottom和left），但不是相对于其任何一个父html元素定位，而是固定元素相对于浏览器窗口/视口定位。 Here在right属性上是一个非常好的帖子，如果你想要阅读更多内容。

Answer 2

像这样 - jsFiddle 1

.navbar-fixed-top, #footer, .sidebar-nav{
    position:fixed;
}

.sidebar-nav{
    top:50px;
    bottom:40px;
    overflow-y:scroll;
}

或者像这样 - jsFiddle 2

.navbar-fixed-top, #footer{
    position:fixed;
}

.sidebar-nav{
    position:relative;
    margin-bottom:60px;
}

#footer {
    height: 60px;
    width:100%;
    bottom:0px;
}

这些可能需要一些微调，你似乎使用了许多影响你的布局的外部资源。您可能需要考虑简化一下。

侧栏具有100％的高度和滚动内容区域

2 个答案: