Javascript 具有100%高度且无滚动条的单窗口应用程序_Javascript_Jquery_Jquery Ui_Css

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

javascript jquery jquery-ui css

Javascript 具有100%高度且无滚动条的单窗口应用程序,javascript,jquery,jquery-ui,css,Javascript,Jquery,Jquery Ui,Css,我目前正在使用jQuery开发一个web应用程序。其布局如下图所示：最后面的橙色框的高度和宽度应为100%，并留有5px左右的边距徽标和选项卡栏的位置如图所示，高度约为50像素。但选项卡栏的大小应如图所示，并留有一定的边距选项卡内容应占据剩余高度，并应滚动查看其所占内容内部菜单栏和选项卡内容需要类似的结构有人能建议使用哪种布局方法吗？或者如何操作不同的高度/宽度该要求还建议使用响应窗口，即调整大小时要操作的宽度/高度。您可以使用类似Blueprint CSS的内容：这里有一

我目前正在使用

jQuery

开发一个web应用程序。其布局如下图所示：

最后面的橙色框的高度和宽度应为100%，并留有5px左右的边距

徽标和选项卡栏的位置如图所示，高度约为50像素。但选项卡栏的大小应如图所示，并留有一定的边距

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

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

有人能建议使用哪种布局方法吗？或者如何操作不同的高度/宽度

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

您可以使用类似Blueprint CSS的内容：

这里有一个非常快速和肮脏的布局（不使用blueprint 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>


html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
溢出：隐藏；/*隐藏页面滚动条*/
}
div{
保证金：0自动；
填充：0；
边框：1px纯黑色；/*用于调试*/
文本对齐：居中；
}
#标题{
宽度：100%；
位置：相对位置；
溢出：自动；
}
#标题>div{
身高：5%；
浮动：左；
}
#标志{
宽度：23%；
}
#间隔棒{
宽度：1%；/*-1%用于边框*/
}
#塔巴{
宽度：75%；
}
#塔布坎特{
}
#tabContent>div{
宽度：100%；
}
#塔巴{
身高：5%；
}
#塔布康特梅因{
最小高度：80%；
}
标志
标签栏
选项卡内容
选项卡内容-菜单栏
选项卡内容-主要内容

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

这里有一个非常快速和肮脏的布局（不使用blueprint 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>


html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
溢出：隐藏；/*隐藏页面滚动条*/
}
div{
保证金：0自动；
填充：0；
边框：1px纯黑色；/*用于调试*/
文本对齐：居中；
}
#标题{
宽度：100%；
位置：相对位置；
溢出：自动；
}
#标题>div{
身高：5%；
浮动：左；
}
#标志{
宽度：23%；
}
#间隔棒{
宽度：1%；/*-1%用于边框*/
}
#塔巴{
宽度：75%；
}
#塔布坎特{
}
#tabContent>div{
宽度：100%；
}
#塔巴{
身高：5%；
}
#塔布康特梅因{
最小高度：80%；
}
标志
标签栏
选项卡内容
选项卡内容-菜单栏
选项卡内容-主要内容

我说过我会做的

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

我将尽可能快地解释这个过程，不要含糊其辞

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

然后我在这个包装里放了2个div，同样地，这些都可以不依赖于你的需要来完成。我喜欢这两个div并经常使用它，因为它提供了人们可能期望的“垂直对齐->中间”。第一个是parent，它是一个具有class

table

的div。这将使其

显示设置为table，以提供“类似于桌子”的布局，但仍然能够执行“圆角”之类的操作，或者像我的情况一样，设置高度！第二个子元素与之相同，只是它的类和样式分别为表单元格
。这允许我们设置类似于垂直对齐：中间
并确保此元素位于页面/表格元素的垂直中间。同样，对于您的布局，这可能看起来不必要，但我不知道您的全部预期最终结果，我正在尝试尽可能多地为页面提供“流体动力学”
最后，我首先将jQueryUI选项卡HTML插入到它们的预期布局中，有两个小区别。我将我们的“徽标”放在定制的span标签中，就在ul
之前。我还使用ui选项卡面板
，并将它们放在自己的容器中。这有助于我们根据需要调整选项卡区域的高度。我也给了这个容器溢出，所以即使溢出可能隐藏在主体上，它仍然可以用于选项卡。（另见：）
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();
})

至于标签内容的布局，完全取决于您和您的想象力。希望这将给你一个好主意，从哪里开始虽然！祝你好运
 我说过我会做的
如您所见，我使用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();
})