我怎样才能拥有一个div/span "fill in" 剩余的width/height 页面，并保持固定位置？

Question

我正在尝试开发一个在本地运行的网络应用程序（不知道如何解释它，但它的工作方式与 clipchamp 一样，因为它 "works" 在您的计算机上）但是现在是无关紧要的，所以我不会在这方面进一步深入。

目前我在页面布局及其 CSS 规则方面遇到问题。我有一个 header(div) 占据了页面宽度的 100%，但高度为 25px，位于页面顶部；和一个应该占据剩余 space 高度的导航栏（跨度）（我们稍后会到达那里），宽度为 180px 并位于左侧这页纸。页面的其余部分应该是内容所在的位置。

我的问题如下：

因为我希望 header 和导航栏都固定在它们的位置（这样滚动只发生在内容 div 上）我尝试将 position: fixed; 添加到它们的位置规则。然而，这导致导航栏将其位置重置为页面的左上角，因此与 header 重叠，因此我将导航栏从顶部移动了 27px（header 的高度 + 它的边框) 并且由于我不知道如何让导航栏占据剩余的 space 高度，所以我暂时将其高度设置为 97.2%。这显然很糟糕，这就是我来这里的原因。那么，我怎样才能让这个跨度自动占用剩余的space？
完成上述操作后，我发现页面左上角的内容div移动了。 我不知道为什么会发生这种情况。 我尝试将内容 div 移动固定数量并以类似的方式来解决这个问题，这同样很糟糕。所以我遇到了和以前基本相同的问题，除了这次是宽度和高度。

我尝试搜索并查看了一些建议给其他用户的解决方案（this solution here suggested by another user in this thread 更感兴趣，但作为新手我不太明白如何调整它以包含垂直列在内容 div 旁边，因此恢复了我对代码所做的尝试更改，并尝试坚持我 理解的内容 )。

因此，这是 HTML 代码。 header 中的图像应该不是问题，唯一的脚本只是每 100 毫秒刷新一次页面。（注意：导航栏目前是空的，但里面应该有一个 "arrow-menu"）

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="preview.js"></script>
    </head>
    <body>
        <div id="header">
            <span id="avatar">
                <img id="avatarImage" src="assets/defaultProfile.png" width="20" height="20">
            </span>
            AnimeDB
            <span id="lightText">Dev Mode</span>
        </div>
        <span id="navbar"></span>
        <div id="content">
            Content
        </div>
    </body>
</html>

这是 CSS，但我删除了对导航栏和内容的更改。在你继续阅读之前，我想指出我还没有完全理解我在这里使用的一些属性（主要是浮动和显示。我有一个非常粗略的想法两者如何工作）。

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body{
    background-color: #D3D3D3;
}

#header {
    display: inline-block;
    color: white;
    background-color: #41B1E1;
    width: 100%;
    height: 25px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: bold;
    font-size: 17px;
    border-bottom: 2px solid white;
    /*box-shadow: 0 3px 5px #9f9f9f;*/
}

#avatar {
    float: left;
    background-color: #0071BC;
    color: white;
    width: 30px;
    height: 25px;
    padding: 0 5px 0 5px;
    border-right: 3px solid #71C5E9;
    margin-right: 5px;
}

#avatarImage {
    margin: 2px 5px;
}

#lightText {
    color: rgba(255, 255, 255, 0.5);
}

#navbar {
    float: left;
    width: 180px;
    height: 97.2%;
    background-color: #A5A5A5;
    border-right: 2px solid white;
}

#content {
    background-color: greenyellow;
}

我希望我已经足够清楚地解释了我的问题和思考过程，并且我可以从这次经历中学到一些新东西。

Answer 1

https://jsfiddle.net/8qqbewo1/

最简单的方法是在 css 中使用 calc()。

Calc 基本上允许您给出动态值和固定值，并在 CSS.

中对它们进行简单的算术运算

因此，如果您执行内容高度 = 100% - (heightOfheader + heightOffooter)，您的内容将自动缩放。

.content {
  height: calc(100% - 96px );
  overflow: auto;
}

Answer 2

由于导航栏是一个跨度，您必须将显示设置为块状才能使其受宽度和高度的影响。

#navbar {
    width: 180px;
    position: fixed;

    display: block;
}

您可以让导航栏自动占据剩余的space，方法是将其底部贴在屏幕底部。

#navbar {
    width: 180px;
    position: fixed;
    display: block;

    bottom: 0;
}

至于内容div，它移动到左上角，因为固定定位元素默认定位到左上角。

您仍然需要将它向下和向左移动，但是您可以通过将它的右边缘和下边缘粘在屏幕的两侧来让它占据 space 的其余部分。

#content {
    top: 27px;
    left: 180px;
    right: 0;
    bottom: 0;
}

这会使内容 div 占据屏幕的其余部分，但如果实际内容大于 div，则不允许滚动。

要使其能够滚动，请将其溢出属性设置为滚动或自动。

#content {
    top: 27px;
    left: 180px;
    right: 0;
    bottom: 0;

    overflow: scroll;
    /* OR */
    overflow: auto;
}

Scroll 使滚动条一直显示，但如果内容适合，auto 将隐藏滚动条。

Answer 3

我的解决方案是使用 2 个包装 div：

body-wrapper：包含header和content-wrapper
content-wrapper: 包含导航栏和内容

包装器有内边距并设置为 100% 宽度、100% 高度和 box-sizing:border-box;，这非常重要。通常你会得到 100% + 填充。使用 box-sizing:border-box; 时，元素将保持为 100%。

body,
html {
    height: 100%;
}

body {
    background-color: #eee;
    margin: 0;
}

#body-wrapper {
    position: relative;
    height: 100%;
    padding-top: 50px;
    background-color: orange
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 15px 0 0 120px;
    background-color: #bababa;
}

img {
    position: absolute;
    top: 0;
    left: 0;
}

#content-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    padding-left: 100px;
}

#navbar {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    padding: 10px;
    color: #fff;
    background-color: #333
}

#content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 1px 20px;
    overflow-y: auto;
}

.border-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

<div id="body-wrapper" class="border-box">
    <div id="header" class="border-box">
        <img src="http://placehold.it/100x50">AnimeDB
    </div>
    <div id="content-wrapper" class="border-box">
        <div id="navbar" class="border-box">navbar</div>
        <div id="content" class="border-box">
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </div>
    </div>
</div>

我怎样才能拥有一个div/span "fill in" 剩余的width/height 页面，并保持固定位置？

How can I have a div/span "fill in" the remaining width/height of the page, and stay fixed in position?

html

css

scale