Question

我目前正在使用jQuery开发一个Web应用程序。其布局如下图所示：

背面的橙色盒子的高度和宽度应为100％，边距为5px左右。

徽标和标签栏如图所示放置，高度约为50像素。但是标签栏的大小应该如图所示。

标签内容应占用剩余高度，并应滚动显示其占用的内容。

内部菜单栏和标签内容需要类似的结构。

有人可以建议采用的布局方法吗？或者我如何操纵不同的高度/宽度？

该要求还建议了一个响应窗口，即在调整大小时操纵的宽度/高度。

Answer 1

我说的jsFiddle。

正如您将看到的，我使用jQueryUI作为“标签”布局，只需“添加”一些内容。我“添加”的一些东西很简单，jQueryUI alreqady提供了一个强大的CSS来操作以获得所需的结果。此页面上还附有一个主题切换器，因此您可以看到使用不同的jQueryUI默认主题会是什么样子。

我会尽快解释这个过程，而不是模糊。

HTML

我首先从一个基本的页面包装器开始。不太必要，但它提供了一个很好的“元素”，可以在其中工作，并可能在未来的其他方面对页面布局进行操作。现在它只是保持我们的页面“填充”5px。 HTML和BODY标记将被设置为默认值，不应该被操纵，因为高度和其他属性在不同的浏览器中对这些标记开始具有不同的含义。

然后我在这个包装器中放置了2个div，再次，这些可以在不依赖于您的需要的情况下完成。我喜欢这两个div并使用这个很多，因为它提供了“垂直对齐 - >中间”，正如人们所期望的那样。第一个是父类，是一个类table的div。这将display设置为表格以提供“类似于表格”的布局，但仍然能够执行“圆角”或“在我的情况下设置高度”等操作！第二个孩子是相同的，除了它的类和样式分别为table-cell。这允许我们设置类似vertical-align: middle;的内容，并确保此元素位于页面/表元素的垂直中间。再次，使用您的布局，这似乎是不必要的，但我不知道您的完整预期的最终结果，并且我试图尽可能多地为页面提供“流体动力学”。

最后，我首先在其预期的布局中插入jQueryUI选项卡HTML，但有2个小差异。我将“徽标”放在ul之前的自定义范围标记中。我也把ui-tab-panel（s）放在他们自己的容器里。这有助于我们根据需要调整标签区域的高度。我也给了这个容器溢出，所以即使溢出可能隐藏在身体上，它仍然可用于标签。（另见：small blog i wrote on jQueryUI Tabs）

<div class="page-wrapper">
    <div class="table">
        <div class="table-cell">
            <div id="tabs">
                <span class="my-logo">
                    <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="logo here" />
                </span>
                <ul>
                    <li><a href="#tabs-1">Nunc tincidunt</a></li>
                    <li><a href="#tabs-2">Proin dolor</a></li>
                    <li><a href="#tabs-3">Aenean lacinia</a></li>
                </ul>
                <div class="ui-tabs-panel-container">
                    <div id="tabs-1">
                        <<p> ... </p>
                    </div>
                    <div id="tabs-2">
                        <p> ... </p>
                    </div>
                    <div id="tabs-3">
                        <p> ... </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

正如我之前提到的，jQueryUI为我们提供了一个强大的CSS。您可能已经注意到，我通过在整个HTML中使用它们的预定义类名来利用其中一些。这确定了诸如background，color甚至font-family等内容！现在已经结束了，让我们首先布局我们的页面机制。正如我所提到的，我为HTML和BODY提供了一组非常“直接”的属性。这将有助于消除“跨浏览器问题”。我还提供了背景颜色，你可以在其中一个孩子级别设置。这样做只是为了向您展示HTML，BODY的存在位置。

然后我设置了“框架”元素。 .page-wrapper将提供我们的页面包装，大小将来自内部，所以没有必要在这里处理它。 .table和.table-cell提供与其名称完全相同的显示。如前所述，这提供了一种很好的能力，可以将元素保持在某个东西的确切“中心”，甚至是垂直的！

现在我们操纵我们的标签和内容。我始终使用#tabs来维护“名称间距”。这不仅有助于jQueryUI预设的任何“css覆盖”，还有助于将页面布局混淆降至最低。这总是一件好事。

我操作的第一件事是标识的自定义范围的放置和设置。然后，当然，我必须将ul更改为旁边的ul。因此，我查看ui-tabs-nav类的CSS。如果我在浏览器中打开编辑工具，我可以看到ul被赋予了类名margin-left，我可以看到它有一个边距设置。如果我玩这个ul的ui-tabs-panel-container我可以看到没有任何影响，但ul的左侧。完善！这是我必须操纵将我们的日志设置在“自己的空间”中。

最后，我只是设置我们的标签容器（给定自定义类名html, body { background-color: #ADDFFF; height: 100%; padding: 0; margin: 0; overflow: hidden; width: 100%; } .page-wrapper { padding: 5px; } .table { display: table; } .table-cell { display: table-cell; vertical-align: middle; } #tabs .my-logo { display: inline-block; float: left; height: 2em; margin: .5em 0 0; padding: 0; width: 2em; } #tabs .my-logo img { max-height: 100%; max-width: 100%; float: left; } #tabs .ui-tabs-nav { margin-left: 2em; } #tabs .ui-tabs-panel-container { overflow: auto; }，使其与jQueryUI匹配）溢出，这样如果任何内容超出我们的页面高度，它仍然可以在此元素中滚动。

//  the following will resize our tabs content area and account for all the spacing neccessary
function setContentHeight(e) { return $(window).innerHeight() - $(this).offset().top - 10; }  // -10 to account for padding

$(function() {  //  our on page load call
    $("#tabs").tabs();  //  establish tabs
    //  add ability to resize tabs content area on window resize, then call resize event
    $(window).resize(function(e) { $("#tabs .ui-tabs-panel-container").height(setContentHeight) }).resize();
})

JS

最后，轻松的工作。我编写了一个函数来设置标签内容区域的高度，因为它将“填充”页面的其余部分。这需要一点思考，但不难发现。编写函数后，我只需将其添加到window resize事件中，然后立即调用该事件。这样它在负载时调整大小，从而为我们提供了第一个视图的“结束高度”。我也建立了标签，虽然没有多少工作，因为我只是制作“默认标签”。随意尝试，狂野！

{{1}}

至于标签内容的布局，这完全取决于您和您的想象力。希望这会让你很好地了解从哪里开始！祝你好运！

Answer 2

您可以使用Blueprint CSS之类的东西：

http://www.blueprintcss.org/

这是一个非常快速和脏的布局（不使用蓝图CSS，只是简单的CSS），作为一般准则。它仍然需要工作，但它可以作为一个起点：

<html>

<head>
<style>
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;   /* hide page scrollbars */
}

div {
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;    /* for debugging */
    text-align: center;
}

#header {
    width: 100%;
    position: relative;
    overflow: auto;
}

#header > div {
    height: 5%;
    float: left;
}

#logo {
    width: 23%;
}

#spacer {
    width: 1%; /* -1% for borders */
}

#tabbar {
    width: 75%;
}

#tabContent {

}

#tabContent > div {
    width: 100%;
}

#tabContentMenuBar {
    height: 5%;
}

#tabContentMain {
    min-height: 80%;
}
</style>
</head>

<body>
    <div id="header">
        <div id="logo">Logo</div>
        <div id="spacer"></div>
        <div id="tabbar" class="fullWidth">Tab bar</div>
    </div>
    <div id="tabContent">
        Tab content
        <div id="tabContentMenuBar">Tab content - menu bar</div>
        <div id="tabContentMain">Tab content - main content</div>
    </div>
</body>

</html>

单窗口应用，高度100％，无滚动条

2 个答案:

HTML

CSS

JS