Question

我们需要创建一个不滚动的完整页面HTML / Javascript应用程序（100％HEIGHT / WIDTH），我们正在使用 jQueryUI 。 jQuery中有没有办法强制执行此操作？

目标是放置2个标签栏，每个标签栏的高度均为50％，无论屏幕大小如何，都保持这个比例。

以下是我们使用其他框架（DevExpress）创建的完整页面应用程序的含义示例：

我们必须使用jQuery，因为该应用程序将 100％客户端，没有任何网络连接。 DevExpress主要是服务器端框架。因此，性能并不重要，没有网络延迟，所以一个大而简单的框架比复杂的自定义框架更好。

Answer 1

你真的不需要任何 jQuery（100％高度/宽度） - （滚动）。 CSS就是这样的方式：

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.tabBar {
    height: 49.1%;
    overflow: scroll;
    border: 2px solid #000;
}

标记：

<html>
    <body>
        <div class="tabBar">Tab bar 1</div>
        <div class="tabBar">Tab bar 2</div>
    </body>
</html>

jsfiddle demo ⇒

我建议从一些CSS复位开始。我喜欢the one from YUI。这样，您就可以删除padding: 0;和margin: 0;属性，也不会遇到任何其他可能会影响布局的意外样式。

那就是说，如果你想看看布局，YUI提供了一个很好的layout builder - 再次，你真的只需要CSS的基础知识。

Answer 2

我推荐JQuery'UI.Layout'插件：http://layout.jquery-dev.net/index.cfm

这模仿Java的'BorderLayout'并且很简单但有很多功能。比乱用CSS几个小时容易得多;）

jQueryUI - 整页

2 个答案: