我的问题很简单.但我用google搜索谷歌搜索谷歌但没有找到答案.

我在zurb foundation 3中有一个简单的布局

<divid="wcont1">
    <divid="wcont1a">

    </div>
    <divid="wcont1b">

    </div>
    <divid="wcont1c">

    </div>
</div>

我希望在填充wcontb列时,它不应该超出特定点(由我定义),而是应该使用向上和向下箭头图标垂直滚动.

我是新手.我将非常感谢使用zurb foundation 3的详细答案和工作示例.

你有两个问题：

>您希望限制中间div(wcont1b)的高度,以便内容在到达特定点时可滚动.
>你想要一个漂亮的方式做到这一点

请注意,这两个问题是分开的问题.所以让我们解决第一个并使用Zurb Foundation 3.2.2你可以像这样布局你的三个div：

<divid="wcont1">
        <divid="wcont1a">
            <div>
            Content goes here...
            </div>
        </div>
        <divid="wcont1b">
            <div>
                <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>
        <divid="wcont1c">
            <div>
            Content goes here...
            </div>
        </div>
    </div>

我填充了wcont1b,以便我们可以看到滚动条的运行情况.我还将示例内容放在zurb面板中(使用面板类),这样您可以更好地了解div如何分离以及滚动条的行为(我将向您展示两种方法).

好的,所以现在你在中心有那么高的div(‘wcont1b`),我们希望它有一定的高度,所以它不会占用太多空间,特别是在移动设备上观看时(尽管我个人喜欢比一个带滚动条的短小的,特别是如果div之外和之下有内容).要控制div的高度,需要在css中使用：

方法#1

#wcont1b .panel {
    最大高度：150px;
    overflow-y：scroll;
}

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

方法#2

#wcont1b .panel ul {
    最大高度：150px;
    overflow-y：scroll;
}

现在请注意,只有列表滚动,标题保持在最顶层.不同之处在于你的css现在以ul,列表为目标,而不是整个内容,而不是整个wcont1b.

有了它你现在有一个高度控制div.但我认为你希望滚动条看起来很漂亮,这就是jquery插件的用武之地.你告诉我们你已经尝试了数百万但是你没有向我们展示任何代码,而且你做的很重要.但是,让我举一个使用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>

就是这样,它应该解决你的问题.如果您遇到更多问题,您需要提供尽可能多的信息,以便此处的人员可以更好地帮助您.

我做了一个可滚动的div的小网页.当我在浏览器中加载它,它的工作正常.但是当我将其加载到 Android中的网络视图中时,它不允许我滚动div.有没有解决方法,或者我必须使用不同的设计？我在谈论像 this这样的网站.

不幸的是,大多数当前的移动Webkit浏览器都不支持scrollable div.一个很好的替代本地支持是iScroll JavaScript库,它可以模拟真正的滚动：

http://cubiq.org/iscroll

从该页面的项目描述中复制/粘贴：

The overflow:scroll for mobile webkit. Project started because webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area. Until Now.

版本3.3及更高版本支持Android> = 1.5.

昨天我决定试试我的一个网络应用程序.一切都运行正常,因为我在localhost,但当我将新的更改推送到我的EC2实例,继续按照Zurb基金会的指示,我遇到了这个错误：

Sass::SyntaxError in Home#index

Showing /var/www/brain_db/app/views/layouts/application.html.erb where line #18 raised:

File to import not found or unreadable: foundation/foundation-global. Load path: Sass::Rails::Importer(/var/www/brain_db/app/assets/stylesheets/foundation_and_overrides.scss) (in /var/www/brain_db/app/assets/stylesheets/foundation_and_overrides.scss)

作为Ruby on Rails和Foundation的新手,我真的不确定如何解决这个问题.我通过谷歌搜索找到了许多有类似问题的人,但他们的情况略有不同,这使我难以诊断.有什么建议？

我得到了同样的错误,事实证明我只需要重启我的本地开发服务器.

我决定使用基础4的Sass版本作为CSS，现在几乎不可能有效地编辑。

我按照这里的说明：http://foundation.zurb.com/docs/sass.html

这些建议我安装宝石(没问题)，然后安装指南针然后创建一个项目，这是我在wwwroot。

到目前为止都不错然后接着告诉我“从Github下载文件(抓取scss /和js /目录)并将它们放入您的项目目录”

现在为什么以自行车上的鱼的名义，如果命令行上的上一步(罗盘创建-r zurb-foundation – 使用基础)创建一个已经在根目录中的文件夹，我的指示会建议我这样做项目 – 尽管命名不同 – 包含类似但不完全相同的文件？已经有一个包含“基础”和“供应商”子文件夹的“javascripts”文件夹，它们大部分包含相同的文件 – 尽管有些文件大小不同。

我错过了什么吗？包含的“index.html”文件引用“javascripts”文件夹，为什么我打算从github包含“js”？当你刚刚接触技术时，这非常混乱！

在遵循安装说明之后，我现在有了“foundation.scss”和“app.scss”文件，除了一个(app.scss)之外似乎大部分是相同的，有很多注释。我打算用哪一个？

在我看来，说明书基本上已经过时了。看来我不需要github的“js”，但我确实需要“scss”。这个scss文件夹的内容看起来像是需要进入项目创建的“sass”文件夹，而“foundation.scss”文件可以被删除，因为“app.scss”是它的副本。

我不知道基本的“app.scss”文件希望如何在“安装/创建项目”时创建“基础”文件夹“@import foundation”。也许我错过了一些东西，但这真的很混乱。有人可以澄清我需要什么，我可以删除/忽略吗？

当您安装gem时，所有正确的基础文件都将安装在gem缓存中。指南针将通过来自foundation.scss的@import指令将所有F4 SCSS文件拉入您的项目。

Github报价中的项目文件显示了建立F4项目的最新Compass说明。
https://github.com/zurb/foundation/blob/master/docs/sass.html.erb

听起来你正在将独立指令混入指南针。

如果你运行这个：

[sudo] gem install compass
cd path/to/where-you-want-your-project
run compass create <project-name> -r zurb-foundation --using foundation

您不需要Github或独立指令。

以下步骤概述了构建F4项目的手动步骤。我认为你坚持在第4步，所以专注于那一部分。

步骤1：

下载以便于访问这两个档案：

香草香草：

http://foundation.zurb.com/files/foundation-4.1.6.zip

基础硕士：

https://github.com/zurb/foundation/archive/master.zip

光盘放入您的www根目录：

第2步：

创建此文件：

/config.rb

require 'zurb-foundation'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
relative_assets = true
line_comments = true

切换output_style =：compact或：压缩，line_comments = false for Production(上线时)。

步骤3：

>将index.html从Foundation Vanilla复制/移动到您的根www目录中。
>编辑第11行并将foundation.css更改为样式标签中的app.css。

步骤4：

创建此目录和文件：

/ SCSS /

>创建app.scss – 这是您的网站/应用程序样式表，我们将在其中导入normalize和F4。
>将其复制到：

// Global Foundation Settings
// @import "settings";

// Comment out this import if you don't want to use normalize
@import "normalize";

// Comment out this import if you are customizing you imports below
@import "foundation";

// Your own SCSS here...

如果要覆盖一些F4 SaSS变量，您将需要_settings.scss文件。现在我会跳过这个步骤，留下评论，直到你更熟悉F4。

步骤5：

创建此目录(文件自动写在这里)：

/ CSS /

> app.css – 将由Compass的/scss/app.scss写入。规范化，所有F4 CSS将在其内，加上您添加的任何您自己的CSS。

这种情况自动发生，除了安装了所需的宝石以及STEP 2中的Compass配置文件之外，您不需要执行任何操作。

步骤6：

创建此目录并将这些文件复制/移动到其中：

/ JS /

>从Foundation Vanilla下载这里复制/移动/js/foundation.min.js。
>如果你需要你自己的app.js创建/放置在这里，并链接到最后一个页脚。

/ JS /供应商/

>将/js/vendor/custom.modernizr.js从Foundation Vanilla下载到这里。
>复制/移动/js/vendor/zepto.js和/js/vendor/jquery.js从Foundation Vanilla下载。

之后，当您感觉更舒服时，您可以从Foundation Master中挑选单独的Foundation JS文件，并将它们连接成一个较小的lib，作为foundation.min.js。

应该这样做

检查这个文件在我的www repo，因为它显示一个工作的F4设置：
https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html

您还可以在这里挖掘如何将Grunt.js集成到自动化构建SCSS和JS中并进行连接和分类：
https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js