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>

感謝。

來源

2013-05-04 Juliano Nunes Silva Oliveira

您的頁腳未固定，但在內容較短（「粘滯」）時被推到頁面的底部。，使之能固定，你需要使它有類似：

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 15:44:21

正是我需要的。你能解釋一下爲什麼側邊欄沒有任何高度屬性？ – 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

這可能需要一點點微調，你似乎是使用大量的外部資源的那些影響你的佈局。你可能想考慮簡化一下。

來源

2013-05-04 15:49:22 apaul

100％高度和滾動內容區域的邊欄

回答

相關問題