4

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

我在 zurb Foundation 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 Foundation 3 的详细答案和工作示例。

4

1 回答 1

10

你有两个顾虑：

  1. 您想限制中间 div ( wcont1b) 的高度，以便内容在到达特定点时可滚动。
  2. 你想要一个漂亮的方式来做这件事

请注意，这两个问题是分开的问题。所以让我们解决第一个问题，使用 Zurb Foundation 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了，所以我们可以看到滚动条在运行。我还将示例内容放在 a 中zurb panel（使用panel类），这样您就可以更好地了解 div 是如何分隔的以及滚动条的行为方式（我将向您展示两种方法）。

好的，现在您在中心有一个高 div ('wcont1b`)，我们希望它具有一定的高度，这样它就不会占用太多空间，尤其是在移动设备上查看时（尽管我个人更喜欢高 div一个带有滚动条的短的，尤其是在 div 之外及其下方有内容的情况下）。要控制 div 的高度，您需要在 css 中使用：

方法#1

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

max-height 值是高度限制，wcont1b绝对应该根据您的要求更改它。overflow-y 负责处理滚动条。wcont1b如果您有一个标题并且您不希望它与内容一起滚动，那么这种方法将是不可取的。所以为了更漂亮，你应该这样做：

方法#2

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

现在请注意，只有列表滚动并且标题保持在顶部。不同之处在于您的 css 现在以 .list 为目标ul，而不是整个内容或整个wcont1b.

有了它，你现在有了一个高度控制的 div。但是我认为您希望滚动条看起来不错，这就是 jquery 插件的用武之地。您告诉我们您已经尝试过millions，但您没有向我们展示任何代码，您这样做很重要。但是，无论如何，让我举一个例子，你可以在这里找到使用 jscrollpane的例子。下载必要的文件并在页面上引用它们后，您需要执行以下操作：

方法 #1 所需的代码：

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

方法 #2 所需的代码：

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

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

于 2013-03-18T01:52:59.327 回答