zurb基礎中的滾動欄div 0

我的問題很簡單。但是我用谷歌搜索和谷歌搜索，但沒有找到答案。zurb基礎中的滾動欄div 0

我在zurb基礎一個簡單的佈局3

<div class="row" id="wcont1"> 
    <div class="three columns" id="wcont1a"> 

    </div> 
    <div class="six columns" id="wcont1b"> 

    </div> 
    <div class="three columns" id="wcont1c"> 

    </div> 
</div>

我想是填充wcontb列時，它不應該擴大超過特定點（由我定義的），而是它應該是滾動的垂直使用上下箭頭圖標。

我是新手。使用zurb基礎3.

來源

2013-03-15 user2115154

和一杯咖啡？你有什麼嘗試？ – Luca 2013-03-15 17:07:13

數以百萬計的jquery插件和css位置。抱歉。我是一個像我最初提到的新手。 – user2115154 2013-03-15 17:50:16

我將高度讚賞了詳細的解答和工作例如你有兩個問題在這裏：

要限制中間DIV（wcont1b）的高度，以使內容在到達特定點時可滾動。那你想這樣做

請大家注意，兩個問題是分開問題的漂亮的方式

。因此，讓我們來解決第一個和使用Zurb基金會3.2.2可以佈置你的三個div的，像這樣：

<div class="row" id="wcont1"> 
     <div class="three columns" id="wcont1a"> 
      <div class="panel"> 
      Content goes here... 
      </div> 
     </div> 
     <div class="six columns" id="wcont1b"> 
      <div class="panel"> 
       <h4>Content goes here...</h4> 
       <ul> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
        <li>4</li> 
        <li>5</li> 
        <li>6</li> 
        <li>7</li> 
        <li>8</li> 
        <li>9</li> 
        <li>10</li> 
       </ul> 

      </div> 
     </div> 
     <div class="three columns" id="wcont1c"> 
      <div class="panel"> 
      Content goes here... 
      </div> 
     </div> 
    </div>

我填充wcont1b所以我們可以看到在行動滾動條。我還將示例內容放在zurb panel（使用panel類）中，以便更好地瞭解div是如何分開的以及滾動條的行爲方式（我將向您展示兩種方法）。

好的，現在你在中心有一個高分區（'wcont1b`），我們希望它具有一定的高度，所以它不會消耗太多空間，特別是在移動設備上查看時（儘管我個人更喜歡一個較高的div，而不是一個帶滾動條的短格子，特別是如果div以外的內容和它低於）。要控制你需要這個在你的CSS的div高度：

方法＃1

#wcont1b .panel { max-height: 150px; overflow-y: scroll; }

的最大高度值是wcont1b高度限制，肯定你應該每更改你的要求。溢出-y是照顧滾動條的那個。如果您在wcont1b中擁有標題，並且您不希望它與內容一起滾動，則此方法將不可取。因此，爲了使更多的漂亮，你應該這樣做：

方法2

#wcont1b .panel ul { max-height: 150px; overflow-y: scroll; }

注意，現在只有列表滾動和頭部留在上面。不同的是，你的CSS現在的目標是ul，這個列表，而不是整個內容，或者不是整個wcont1b。

隨着你現在有一個高度控制股利。但我認爲你想要滾動條看起來不錯，這就是jquery插件進來的地方。您告訴我們您已嘗試過millions但您沒有向我們展示任何代碼，這一點很重要。但是讓我舉個例子，使用jscrollpane that you can get here。一旦你下載了必要的文件和所引用它們的頁面上，你需要做到以下幾點：

你需要的方式＃1中的代碼：

<script> 
$(window).load(function(){ 
    $('#wcont1b .panel').jScrollPane(); 
}); 
</script>

的代碼，你需要的方式＃2 ：

<script> 
$(window).load(function(){ 
    $('#wcont1b .panel ul').jScrollPane(); 
}); 
</script>

就是這樣，它應該可以解決您的問題。如果遇到更多問題，您需要儘可能多地提供信息，以便人們可以更好地幫助您。

來源

2013-03-18 01:52:59

zurb基礎中的滾動欄div 0

回答

相關問題