Html 如何使用当前窗口高度的100%（不多也不少）？_Html_Css_Scroll_Height

Html 如何使用当前窗口高度的100%（不多也不少）？

html css scroll

Html 如何使用当前窗口高度的100%（不多也不少）？,html,css,scroll,height,Html,Css,Scroll,Height,我正在开发一个web应用程序，应该有桌面应用程序的感觉。我希望我的布局能够利用整个浏览器窗口的高度（不多也不少）。我已经制作了一个显示页面预期结构的图像换句话说，我不希望用户能够滚动整个页面，而是滚动页面的不同部分。与大多数桌面应用程序的工作方式类似我已经阅读了关于如何创建等高列等的所有内容，但我发现的解决方案中没有一种会将滚动添加到不同的部分，而不是整个页面，并且仍然使用整个窗口高度我希望有人能解决这个问题，这将是非常棒的。我已经在谷歌上搜索了几个小时。如果您熟悉jQuery，请参阅

我正在开发一个web应用程序，应该有桌面应用程序的感觉。我希望我的布局能够利用整个浏览器窗口的高度（不多也不少）。我已经制作了一个显示页面预期结构的图像

换句话说，我不希望用户能够滚动整个页面，而是滚动页面的不同部分。与大多数桌面应用程序的工作方式类似

我已经阅读了关于如何创建等高列等的所有内容，但我发现的解决方案中没有一种会将滚动添加到不同的部分，而不是整个页面，并且仍然使用整个窗口高度

我希望有人能解决这个问题，这将是非常棒的。我已经在谷歌上搜索了几个小时。

如果您熟悉jQuery，请参阅

它们还有更多类似这样的插件。

这应该可以让您实现90%的目标：

但是，您是否考虑过使用JavaScript框架，例如？请看一些演示：

html，正文{
保证金：0；
填充：0
}
#容器>分区{
位置：绝对位置
}
#标题{
排名：0；
宽度：100%；
背景：青色；
高度：40px
}
#导航{
顶部：40px；
底部：0；
左：0；
宽度：150px；
背景：#ccc；
溢出-y：自动
}
#内容{
顶部：60px；
底部：0；
左：150px；
右：0；
背景：#eee；
溢出-y：自动
}
#错误{
顶部：40px；
左：150px；
右：0；
高度：20px；
背景：#444
}

在您的案例中，有一个CSS技巧非常有用：将元素的位置声明为绝对位置将顶部位置设置为0 将底部位置设置为0 不应定义图元的高度，也不应将其定义为“自动”

该元素比其父元素的全高

这可能有助于构建您想要的布局

示例代码：

<html>
    <head>
        <style type="text/css">
            .container {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }

            .header {
                height: 40px;
                background: #aabbff;
            }

            .contentLeft {
                position: absolute;
                top: 40px;
                bottom: 20px;
                left: 0;
                width: 40%;
                overflow: auto;
                background: #eeeeff;
            }

            .contentRight {
                position: absolute;
                top: 40px;
                bottom: 20px;
                right: 0;
                width: 60%;
                overflow: auto;
                background: #ddddff;
            }

            .bottom {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                border: 3px solid blue;
                height: 14px;
                background: #9999ff;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header"></div>
            <div class="contentLeft"></div>
            <div class="contentRight"></div>
            <div class="bottom"></div>
        </div>
    </body>
</html>


.集装箱{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}
.标题{
高度：40px；
背景：#aabbff；
}
.contentLeft{
位置：绝对位置；
顶部：40px；
底部：20px；
左：0；
宽度：40%；
溢出：自动；
背景：#eeeeff；
}
.内容权{
位置：绝对位置；
顶部：40px；
底部：20px；
右：0；
宽度：60%；
溢出：自动；
背景:#ddff ;；
}
.底部{
位置：绝对位置；
底部：0；
左：0；
右：0；
边框：3件纯蓝；
高度：14px；
背景：#9999ff；
}

再见

Nico

这段HTML/CSS工作起来很有魅力，非常感谢！正是我需要的。我还没有考虑过JavaScript框架，我更愿意让它尽可能轻量级。你会说坚持使用HTML/CSS而不是Ext JS有什么缺点吗？@Christofer Eliasson：我不知道你在做什么，但你说的是

“桌面应用的感觉”

，这立刻让我觉得你至少应该看看Ext JS，因为它可以做一些非常酷的“桌面风格”事情：-然而，这可能是过于复杂了。我同意你，这是一个很棒的例子，非常接近我一直在寻找的东西。我会仔细看看ExtJS。这是一个很好的解决方案…非常简单，有很多特性！

<html>
    <head>
        <style type="text/css">
            .container {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }

            .header {
                height: 40px;
                background: #aabbff;
            }

            .contentLeft {
                position: absolute;
                top: 40px;
                bottom: 20px;
                left: 0;
                width: 40%;
                overflow: auto;
                background: #eeeeff;
            }

            .contentRight {
                position: absolute;
                top: 40px;
                bottom: 20px;
                right: 0;
                width: 60%;
                overflow: auto;
                background: #ddddff;
            }

            .bottom {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                border: 3px solid blue;
                height: 14px;
                background: #9999ff;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header"></div>
            <div class="contentLeft"></div>
            <div class="contentRight"></div>
            <div class="bottom"></div>
        </div>
    </body>
</html>