1

I'm using Bootstrap Twitter and designed a fluid layout with fixed navbar and footer. But I still need a fixed left sidebar with 100% height and a content area that scrolls if necessary.

I'd like to use the browser's default vertical scrollbar, I mean, I don't want to use overflow-y in my content div. I saw this on some HTML5 websites and I'd like to do the same.

Can you help me?

Here is the code I'm using: 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>

Thanks.

4

2 回答 2

7

Your footer is not fixed ... but rather pushed to the bottom of page when the content is shorter ("sticky"). To make it actually fixed you need to make it have something like:

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

and the sidebar you can make to something like this, that it always spans between the fixed header and footer (with the top and bottom, you can here make it span the way you want):

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

here is an update to your jsfiddle

Note: With position set to fixed, the element gets positioned in a similar way to absolute (so you can set its boundaries/span by defining top, bottom, left and right), but instead of being positioned relative to any one of its parent html elements, a fixed element gets positioned relative to the browser window/viewport. Here is quite a good post on the position property, if you want to read some more.

于 2013-05-04T15:44:21.657 回答
2

Like this - jsFiddle 1

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

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

Or like this - jsFiddle 2

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

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

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

These will likely need a little fine tuning, you seem to be using a lot of external resources that are effecting your layout. You may want to consider simplifying a bit.

于 2013-05-04T15:49:22.587 回答