Twitter引導 - 固定佈局與滾動邊欄

我想實現一個簡單的標題+ 2列布局使用twitter引導。Twitter引導 - 固定佈局與滾動邊欄

我有一個固定的頭寬度爲100％，我現在試圖擁有兩個帶有獨立滾動條的固定寬度的全高度列。有沒有什麼好的方法來做到這一點與twitter引導？

這裏是佈局的圖片我想建立 Layout

來源

2012-04-03 Rand

標題工作正常（導航欄固定頂部）對於列，我使用一個行和兩個跨*的容器。容器和行有溢出：隱藏和高度：100％，而跨度溢出：汽車 – Rand 2012-04-03 16:11:11

關於我的意思是佈局。 – 2012-04-03 16:12:29

我編輯了我以前的評論，我按了意外進入 – Rand 2012-04-03 16:15:47

我找到了一種方法來做到這一點。不知道這是最好的，但它的伎倆：

<html> 

<head> 

    <link rel="stylesheet" media="screen" href="normalize.css"> 
    <link rel="stylesheet" media="screen" href="bootstrap.min.css"> 

    <style type="text/css"> 
      body, html { 
       height: 100%; 
       overflow: hidden; 
      } 

      .navbar-inner { 
       height: 40px; 
      } 

      .scrollable { 
       height: 100%; 
       overflow: auto; 
      } 

      .max-height { 
       height: 100%; 
      } 

      .no-overflow { 
       overflow: hidden; 
      } 

      .pad40-top { 
       padding-top: 40px; 
      } 
    </style> 
</head> 

<body> 

    <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       header contents 
      </div> 
     </div> 
    </div> 

    <div class="container max-height no-overflow"> 
     <div class="row max-height"> 

      <div class="span8 scrollable"> 
       <div class="pad40-top"> 
        main contents 
       </div> 
      </div> 

      <div class="span4 scrollable"> 
       <div class="pad40-top"> 
        right sidebar contents 
       </div> 
      </div> 

     </div> 
    </div> 
</body>

http://jsfiddle.net/m4eS4/7/

來源

2012-04-04 14:51:50 Rand

讓你的代碼變得無所作爲http://jsfiddle.net/m4eS4/3/ – 2012-12-19 13:39:50

修復http://jsfiddle.net/m4eS4/7/ – 2012-12-19 14:38:06

@lenzai ..你確定小提琴按預期工作嗎？我沒有看到右側邊欄。謝謝。 – 2013-05-13 15:05:19

使用自舉的 '預滾動' 你的目標DIV類。將div設置爲某個固定的最大高度。它的美學效果也很好。

來源

2013-08-07 15:17:26

我用這個「好」，它創造了我需要的效果很好 - 看起來像什麼被問上面，更簡單 - 這應該是答案。 – Watson 2013-08-26 01:21:26

如果您在參考/鏈接中找到了預滾動類 – GlennG 2015-02-03 15:53:11

Twitter引導 - 固定佈局與滾動邊欄

回答

相關問題