Question

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

Intended layout

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

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

我希望有人能解决这个问题，这会很棒。我一直在谷歌搜索几个小时。

Answer 1

如果您熟悉jQuery，请参阅http://layout.jquery-dev.net/demos.cfm。

他们也是这样的插件。

Answer 2

这应该可以让你获得90％的胜利：

http://jsfiddle.net/aEdc7/

但是，您是否考虑使用Ext JS之类的JavaScript框架？看看一些演示：http://dev.sencha.com/deploy/ext-4.0.1/examples/

html, body {
    margin: 0;
    padding: 0
}

#container > div {
    position: absolute
}
#header {
    top: 0;
    width: 100%;
    background: cyan;
    height: 40px
}
#nav {
    top: 40px;
    bottom: 0;
    left: 0;
    width: 150px;
    background: #ccc;
    overflow-y: auto
}
#content {
    top: 60px;
    bottom: 0;
    left: 150px;
    right: 0;
    background: #eee;
    overflow-y: auto
}
#error {
    top: 40px;
    left: 150px;
    right: 0;
    height: 20px;
    background: #444
}

<div id="container">
    <div id="header"></div>
    <div id="nav"><br /></div>
    <div id="error"></div>
    <div id="content"></div>
</div>

Answer 3

有一个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>

侨，

尼科

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

3 个答案: