如何制作侧面导航栏并让div填充其余空间[重复]
Posted
技术标签:
【中文标题】如何制作侧面导航栏并让div填充其余空间[重复]【英文标题】：How to make a side navbar and have a div fill the rest of the space [duplicate] 【发布时间】：2019-11-24 19:42:24 【问题描述】：我已经为此工作了好几个小时，但没有任何效果。我正在尝试在页面左侧创建一个宽度为 200 px 的垂直侧导航栏，并根据其所在页面的内容将其一直向下移动到屏幕下方。在右侧的剩余空间中，我需要为页面的“主要内容”设置一个 div，该 div 完全填满该区域并且根本不超出屏幕。
我一直在尝试使用 flexbox 进行样式设置，因为这似乎让我最接近我的目标。但是，通常每当我应用某种类型的特定定位或进行一些小的更改（例如将其中一个 div 的高度更改为 100%）时，它们要么会完全消失，要么会在页面底部的某个奇怪位置重新定位。老实说，我已经重新启动了很多次，以至于我的代码非常简单。我只留下一些我认为有用的标签。
body
margin: 0
.container
display: flex;
.sidenav
width: 200px;
height: 100%;
float: left;
position: absolute;
background-color: blue;
.content
float: left;
position: absolute;
background-color: red;
<div class="container">
<div class="sidenav"></div>
<div class="content"></div>
</div>
如果需要，我可以使用 js、jquery 或 php。如果您碰巧知道任何事情，请提前致谢！
【问题讨论】：
您的解决方案运行良好... 【参考方案1】：这里有一些标记可以帮助您入门：
<!DOCTYPE html>
<style>
body
display: flex;
align-items: stretch;
margin: 0;
div
color: white;
padding: 1em;
#side
width: 200px;
background: orange;
min-height: calc(100vh - 2em);
#content
background: purple;
flex: auto;
</style>
<div id="side">
Sidebar
</div>
<div id="content">
Content
</div>
一些注意事项：
您提到了 flexbox，所以我使用了它。你不需要在弹性框中浮动你的侧边栏。但是，您的内容确实需要flex: auto，以便获得剩余空间。
您应该使用align-items: stretch 使侧边栏和内容高度相同（以较大者为准）。
您应该将最小高度设置为全屏。您可以使用min-height: 100vh; 并在内容和侧边栏中使用嵌套的 div。在这里，我直接在 div 上设置了填充，所以我通过从高度中减去 2×1 em 填充来解释这一点。这同样适用于边界。或者您可以调查 box-sizing 属性。
HTH，祝你好运！
【讨论】：
谢谢！我将您的代码与一些盒子大小属性和对齐方式结合起来，效果很好。 很高兴它很有用。如果您希望其他人看到，您可以接受答案。 ;)【参考方案2】：为了确定，您想要左侧的蓝色侧边栏宽度为 200 像素吗？页面外的其余部分应该是红色的？
这可能是什么？
body
margin: 0
.container
display: flex;
.sidenav
height: 100vh;
width: 200px;
float: left;
position: relative;
background-color: blue;
.content
height: 100vh;
width: calc(100% - 200px);
float: right;
position: relative;
background-color: red;
<div class="container">
<div class="sidenav"></div>
<div class="content"></div>
</div>【讨论】：
【参考方案3】：这样的事情应该可以工作。
您根本不必使用position absolute，这实际上只在某些特殊情况下需要。
我将容器设置为至少 100vh，这意味着它至少具有浏览器窗口的完整高度。
Sidenav 的宽度设置为 200px，没有增加或缩小参数，内容设置为flex: 1，这意味着：占用所有剩余的可用空间。
body
margin: 0
.container
display: flex;
min-height: 100vh;
.sidenav
flex: 0 0 200px;
background-color: blue;
.content
background-color: red;
flex: 1;
<div class="container">
<div class="sidenav">
<p> Here be navigation </p>
</div>
<div class="content">
<p> Here be dragons </p>
</div>【讨论】：
谢谢！我忘了最小高度。在将实际内容添加到 div 后，我不得不调整一些值，但除此之外，这种样式效果很好。【参考方案4】：.container
display: flex;
height: 100vh;
.content
flex: 1 1 auto;
background: #eeeee7;
overflow: auto; /* for fixed side bar*/
.sidenav
flex: 0 0 200px;
background-color:blue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="sidenav"></div>
<div class="content"></div>
</div>
</body>
</html>【讨论】：
【参考方案5】：试试这个。这肯定行得通。
.container
display: block;
.sidenav
width: 200px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: blue;
.content
background-color: red;
margin-left: 200px;
【讨论】：
以上是关于如何制作侧面导航栏并让div填充其余空间[重复]的主要内容，如果未能解决你的问题，请参考以下文章