Question

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

目前我遇到了页面布局及其CSS规则的问题。我有一个标题（div）占据页面宽度的100％，但是高25px并且位于页面的顶部;以及占据剩余空间高度的导航栏（跨度）（我们稍后会到达），宽度为180px，位于页面的左侧。页面的其余部分应该是内容所在的位置。

我的问题如下：

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

我尝试搜索并查看了向其他用户建议的一些解决方案（this solution here中另一位用户建议的this thread更感兴趣，但是新的我不太明白我怎么做使其适应也包括内容div旁边的垂直列，因此恢复了我对代码的尝试更改，并尝试坚持我理解的）。

所以，这是HTML代码。标题中的图像应该不是问题，并且唯一的脚本每隔100毫秒就会不断刷新页面。（注意：导航栏目前是空的，但它应该有一个“箭头菜单”）

<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，但我删除了对navbar和内容的更改。在你继续阅读之前，我想指出我还没有完全理解我在这里使用的一些属性（主要是浮动和显示。我有一个非常粗略的想法如何虽然工作。

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;
}

您可以通过将导航栏的底部粘贴到屏幕底部来自动占用剩余空间。

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

    bottom: 0;
}

对于内容div，它会移动到左上角，因为默认情况下固定位置的元素位于左上角。

你仍然需要将它向下移动到左边，但是你可以通过将它的右边和底边粘在屏幕的两侧来占据剩下的空间。

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

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

为了能够滚动，将其overflow属性设置为scroll或auto。

#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％高度和false，这非常重要。通常你会得到100％+填充。使用box-sizing:border-box;时，元素将保持为100％。

box-sizing:border-box;

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 / span“填写”页面的剩余宽度/高度，并保持固定位置？

3 个答案: