僅使用引導程序滾動內容區域

我正在開發一個前端使用最新版本的Bootstrap構建的小型項目。我有我的主頁部分，但我堅持讓他們按我想要的方式行事。僅使用引導程序滾動內容區域

<body> 
    <div class="container-fluid max-height"> 
     <div class="row max-height"> 
      <div class="col-md-2 col-sm-12 col-xs-12 site-nav"> 
       <div class="row"> 
        <div class="brand"> 
         <a href="index.html"> 
          <img src="http://placehold.it/200x320" class="img-responsive" alt="logo" /> 
         </a> 
        </div><!-- .brand --> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p> 
       </div><!-- .row --> 
      </div><!-- .col-md-2 --> 
      <div class="col-md-10 col-sm-12 site-content"> 
       <div class="row"> 
        <div class="col-md-12 col-sm-12 col-xs-12 info-bar"> 
         <h2>SOME TITLE</h2> 
        </div><!-- .col-md-12 --> 

        <div class="col-md-6"> 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p> 

         <p>Quisque ligula ex, pellentesque sit amet ligula non, ullamcorper egestas nulla. Sed in sapien ut velit finibus scelerisque ac quis purus. Etiam libero nibh, euismod id augue quis, condimentum aliquam diam. Integer faucibus vitae velit sed iaculis. Praesent laoreet neque est, at pharetra nunc scelerisque sit amet. Curabitur fringilla ex a quam commodo, quis hendrerit ipsum ullamcorper. Vestibulum pretium leo odio, feugiat tristique augue laoreet id. Aenean lobortis, mi sit amet pellentesque condimentum, lectus velit gravida diam, a consequat arcu magna eget diam. Phasellus in iaculis dolor, nec rhoncus dolor.</p> 
        </div><!-- .col-md-6 --> 
        <div class="col-md-6"> 
         <div class="article-photo"> 
          <img src="http://placehold.it/500x350" class="img-responsive" alt="article" /> 
         </div> 
        </div> 
       </div><!-- .row --> 
      </div><!-- .col-md-10 --> 
     </div><!-- .row --> 
    </div><!-- .container-fluid --> 
</body>

這裏是一個JSFiddle。

我希望標題欄和邊欄保持原有位置而不滾動內容。我想滾動的唯一東西是內容（藍色）。

如何在Bootstrap中純粹使用CSS來實現這一點？

來源

2015-01-14 Ciwan

你的意思是你想要的側邊欄和標題欄貼到頂部，其下滾動的內容？ –

@新聞，是的，如果你的意思是，在標題欄和邊欄側面，基本上，藍色部分上下滾動，其他所有部分保持在原來的位置。 – Ciwan

如果該頂部部分是動態頁面的一部分，我會閱讀有關Bootstrap導航欄（http://getbootstrap.com/components/#navbar）。一個非常強大的工具，比您的頁面的簡單滾動樣式更具動態性。

對於您當前小提琴的簡單回答，您需要將滾動條設置爲溢出，並在要滾動的div上設置固定高度。將這些CSS屬性添加到滾動div可以完成你所描述的任務。

style="overflow: scroll; max-height: 100px"

小提琴這裏：http://jsfiddle.net/xb6k5vth/1/

來源

2015-01-14 23:52:20

僅使用引導程序滾動內容區域

回答

相關問題