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

Question

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

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

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

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

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

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

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

Answer 1

我说过要做的jsFiddle 。

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

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

的HTML

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

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

最后，我首先将jQueryUI选项卡HTML插入其预期的布局中，但有2个小的区别。 我在ul之前的自定义span标签中放置了我们的“徽标”。 我也将ui-tab-panel放在自己的容器中。 这有助于我们根据需要调整标签区域的高度。 我也给了这个容器溢出，所以即使溢出可能隐藏在身体上，标签也仍然可以使用。 （另请参阅： 我在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的左侧没有受到任何影响。 完善！ 这是我必须处理的将日志设置在其“自己的空间”中的方法。

最后，我只是将我们的tabs容器（给定的自定义类名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();
})

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

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>