我正在尝试开发一个本地工作的网络应用程序(不知道如何解释它，但它像 clipchamp 一样工作，因为它在你的计算机上“工作”)但现在这无关紧要所以我不会在这方面进一步深入。
目前，我在页面布局及其 CSS 规则方面遇到了问题。 我有一个 header(div)，它占据了页面宽度的 100%，但高 25px，位于页面顶部；和一个 应该 占据剩余高度空间的导航栏(跨度)(我们稍后会讲到)，宽度为 180 像素，位于页面的左侧。页面的其余部分应该是内容所在的位置。
我的问题如下:
- 因为我希望标题和导航栏都固定在它们的位置(以便滚动只发生在内容 div 上)，所以我尝试将
position: fixed;添加到它们的规则中。然而，这导致导航栏将其位置重置为页面的左上角，因此与标题重叠，所以我将导航栏从顶部移动了 27 像素(标题的高度 + 它的边框)，因为我不知道如何让navbar占据高度剩下的剩余空间，我暂时给了它97.2%的高度。这显然很糟糕，这就是我来这里的原因。那么，我怎样才能让这个 span 自动占用剩余空间？ - 完成上述操作后，我发现内容 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，但我删除了对导航栏和内容的更改。在您继续阅读之前，我想指出，我还没有完全理解我在这里使用的一些属性(主要是 float 和显示。我非常粗略地了解如何虽然工作)。
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;
}
我希望我已经足够清楚地解释了我的问题和我的思考过程，并且我可以从这次经历中学到一些新东西。
最佳答案
我的解决方案是使用 2 个包装 div:
- body-wrapper:包含 header 和 content-wrapper
- content-wrapper:包含导航栏和内容
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>关于html - 如何让 div/span "fill in"成为页面的剩余宽度/高度，并保持固定位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35119207/