Question

我想将页面作为标准桌面窗口 - 标题栏，菜单栏，工具栏在顶部。状态栏固定在底部。最后 - 中心滚动条的主要内容。 body标签内部的所有内容（或某些div.container标签），但是body标签应始终具有100％的工作空间。不多也不少。

标题栏，菜单栏和状态栏都有常量高度，但内容应该与浏览器窗口大小相关。

这可以不使用JS吗？

我尝试使用css属性的不同组合 - 高度，最大高度，位置，显示，溢出，但随后主内容将主体扩展到100％工作区以上（因此滚动条显示与body标签相关，而是与主要内容有关。）

如何解决这个问题？

编辑：你为什么要吝啬我？这是没有简单解决方案的真正问题。

编辑2：

(...)
<body class="window-without-scrollbar-and-100%-of-browser-window-size">
    <div class="titlebar-const-height"></div>
    <div class="menubar-const-height"></div>
    <div class="main-content-with-scrollbar-and-with-size-relative-to-browser-window">
        <?php loremIpsumGenerator('very long'); ?>
    </div>
    <div class="statusbar-fixed-position-and-const-height"></div>
</body>

Answer 1

您正在寻找的内容（正如我在评论中提到的）是CSS中的calc()函数。 calc()允许你让CSS为你做一些艰苦的工作，我用它来为支持它的浏览器重新计算像素大小的宽度。为了向后兼容旧版浏览器，我建议您尝试使用以下代码段。

＆＃13;

#windowBar {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 40px;
}

#windowBar .titlebar {
    width: 80%;
    width: calc(100% - 40px);
    height: 40px;
    text-align: center;
    float: left;
    background: #ececec;
}

#windowBar .closebutton {
    width: 20%;
    width: calc(40px);
    height: 40px;
    float: left;
    background: #ddd;
}

＆＃13;

    <div id="windowBar">
        <div class="titlebar">My Window Title</div>
        <div class="closebutton">Close</div>
    </div>

＆＃13;

在此之后它的样式，位置（也就是使用固定并在栏之间创建自己的可滚动区域 <使用height: calc(100% - 40px);之类的东西）等等。实际上这是一个非常简单的问题。

如何在HTML和CSS（和/或JS / JQuery）中创建类似桌面的窗口

1 个答案: