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

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

javascript jquery html css

Javascript 如何在HTML和CSS（和/或JS/JQuery）中创建类似桌面的窗口,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想使页面成为标准的桌面窗口-标题栏、菜单栏、顶部的工具栏。状态栏固定在底部。最后-中心有滚动条的主要内容。body标签（或一些div.container标签）中的所有内容，但body标签应该始终拥有100%的工作空间。不多也不少标题栏、菜单栏和状态栏具有常量高度，但内容应与浏览器窗口大小相关。不使用JS就可以做到这一点吗我尝试用css属性的不同组合来实现这一点——高度、最大高度、位置、显示、溢出，但随后主内容将正文扩展到工作区的100%以上（因此滚动条与正文标记相关，而不是与主内容相关）

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

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

不使用JS就可以做到这一点吗

我尝试用css属性的不同组合来实现这一点——高度、最大高度、位置、显示、溢出，但随后主内容将正文扩展到工作区的100%以上（因此滚动条与正文标记相关，而不是与主内容相关）

如何解决这个问题

编辑：你为什么要贬低我？这是真正的问题，没有简单的解决办法

编辑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>

（…）

您正在寻找的（正如我在评论中提到的）是CSS中的

calc（）

函数

calc（）

允许CSS为您完成一些艰苦的工作，我使用它将百分比大小的宽度重新计算为支持它的浏览器的像素大小的宽度。为了与旧浏览器向后兼容，我建议尝试以下代码段

#窗口栏{
宽度：100%；
填充：0；
保证金：0；
高度：40px；
}
#窗台{
宽度：80%；
宽度：计算（100%-40px）；
高度：40px；
文本对齐：居中；
浮动：左；
背景:#ececec ;；
}
#窗口栏。关闭按钮{
宽度：20%；
宽度：计算（40px）；
高度：40px；
浮动：左；
背景：ddd；
}


我的窗口标题
接近

在谷歌搜索到的所有解决方案中，您自己发现了什么没有什么特别的。我们不知道如何在不看到代码的情况下修复代码。如果您对问题进行最低限度的演示，包括1）您的标记+CSS，以及2）解释您在如何显示代码时遇到的问题，您会更好地接受这类问题。然后人们就可以解决您的具体问题，而不必基本上为您编写一个完整的实现。相信我，您不会将《意大利面》视为解决此问题的一步一步的实验性尝试。您确定“宽度”而不是“高度”吗？@user3383675 Calc两者都适用，我只是举了一个例子。我会这样做的，但我还没有深入到足够的深度，看到高度的问题突然出现。虽然我认为除了内容区域之外，您不需要计算高度，因为内容区域没有固定的高度（所有UI栏都有固定的高度，但没有宽度，我认为只有内容会拉伸）。它应该是垂直的，而不是垂直的horizontal@123qwe我很难理解你到底在找什么或问什么，即使你提供了一个截图。请仔细阅读答案并试一试，因为垂直空间问题的工作原理与上的水平空间完全相同（请记住，html和正文需要100%的高度，这样的计算才能正常工作）。在我回答的最后，你会发现

高度：calc（100%-40px）。这应该能奏效。