100％高度和滚动内容区域的边栏

问题描述：

我使用Bootstrap Twitter并设计了具有固定导航栏和页脚的流体布局。但我仍然需要一个固定的左侧边栏，其高度为100％，并且必要时可以滚动内容区域。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>

感谢。

答

您的页脚未固定，但在内容较短（“粘滞”）时被推到页面的底部。，使之能固定，你需要使它有类似：

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（这样就可以通过定义top，bottom，left和right设置其边界/跨度），但不是被相对定位中的任何一个它的父html元素，一个固定的元素相对于浏览器窗口/视口被定位。 Here在position属性上是相当不错的帖子，如果你想阅读更多。

正是我需要的。你能解释一下为什么侧边栏没有任何高度属性？ – 2013-05-04 18:01:59

我刚刚添加了一个说明这个答案的说明。很高兴我能帮上忙。 – 2013-05-05 00:55:30

答

这样的 - jsFiddle 1

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

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

或者这样 - jsFiddle 2

这可能需要一点点微调，你似乎是使用大量的外部资源的那些影响你的布局。你可能想考虑简化一下。

100％高度和滚动内容区域的边栏

相关推荐