zurb基础中的滚动栏div 0

Question

我的问题很简单。但是我用谷歌搜索和谷歌搜索，但没有找到答案。

我在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.

Answer 1

我将高度赞赏了详细的解答和工作例如你有两个问题在这里：

1. 要限制中间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> 

就是这样，它应该可以解决您的问题。如果遇到更多问题，您需要尽可能多地提供信息，以便人们可以更好地帮助您。