javascript - 具有100％高度且无滚动条的单窗口应用程序

Question

我目前正在使用jQuery开发Web应用程序。
相同的布局如下图所示：



最背面的橙色框的高度和宽度应为100％，并有一些边距，例如5px左右。

徽标和标签栏的位置如图所示，高度大约为50px。但是选项卡栏的大小应与所显示的空白相同。

选项卡的内容应占据剩余的高度，并滚动查看所占用的内容。

内部菜单栏和选项卡内容也需要类似的结构。

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

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

Answer 1

我说过要写的jsFiddle。

如您所见，我将jQueryUI用于“选项卡”布局，并仅“添加”一些内容。我“添加”的几件事情很简单，jQueryUI alreqady提供了强大的CSS，可用来进行操作以获得所需的结果。该页面还附带了一个主题切换器，因此您可以看到使用不同的jQueryUI默认主题的外观。

我将尽力在不模糊的情况下尽快解释该过程。

的HTML

我首先从基本的页面包装开始。不太必要，但是它提供了一个不错的“元素”，可以在内部使用它，并可能在将来以其他方式更改页面布局。现在，它仅保留我们的页面“填充”为5px。 HTML和BODY标记将设置为默认值，并且不应超过该默认值进行操作，因为height和其他属性在不同的浏览器中开始对这些标记具有不同的含义。

然后，我将2个div放入此包装器中，同样，这些操作无需依赖您的需要即可完成。我喜欢这2个div，并大量使用它，因为它可以像人们期望的那样提供“垂直对齐->中间”。第一个父对象是具有类table的div。这会将其display设置为table，以提供“ table-like”布局，但仍具有执行“圆角”或设置高度的功能！第二个子元素是child，除了它的类和样式分别为table-cell之外，其他相同。这使我们可以设置vertical-align: middle;之类的内容，并确保该元素位于page / table元素的垂直中间。再次，对于您的布局，这似乎不是必需的，但是我不知道您的预期最终结果是什么，并且我正在尝试为页面提供尽可能多的“流体动力学”。

最后，我首先将jQueryUI选项卡HTML插入其预期的布局中，但有2个小的区别。我将“徽标”放置在ul之前的自定义span标记中。我也将ui-tab-panel放在自己的容器中。这有助于我们根据需要调整标签区域的高度。我也给了这个容器溢出，所以即使溢出可能隐藏在身体上，标签也仍然可以使用。 （另请参见：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 s类的CSS。如果在浏览器中打开编辑工具，则可以看到ul被赋予了类名 ui-tabs-nav，并且可以看到它具有页边距设置。如果我使用此ul的 margin-left，则可以看到ul的左侧没有受到任何影响。完善！这是我必须处理的将日志设置在其“自己的空间”中的方法。

最后，我只是将我们的标签容器（给定的自定义类名称 ui-tabs-panel-container，以匹配jQueryUI）设置为有溢出的，这样，如果任何内容超出页面高度，它仍然可以在此元素内滚动。

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;
}

JS

最后，简单的工作。我写了一个函数来设置标签内容区域的高度，因为它将“填充”页面的其余部分。这需要一点思考，但不难发现。编写函数后，我只需将其添加到窗口调整大小事件中，然后立即调用该事件。这样一来，它就可以在加载时调整大小，从而为我们提供了“最终高度”以供首次查看。我还建立了选项卡，尽管在那里工作不多，因为我只是制作“默认选项卡”。随时尝试，疯狂！

//  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();
})

至于标签内容的布局，完全取决于您和您的想象力。希望这会给您一个从哪里开始的好主意！祝好运！