如何创建两个占据 100% 屏幕并彼此相邻的 div？当 View 变暗时，第一个 View 不会重定向。
___________________________
| | |
| nav | container |
| | |
| | |
|_____|_______footer________|
缩小屏幕后
____________________
| | |
| nav | container |
| | |
|_____|____footer____|
容器减少了宽度但导航没有
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Sibcom - Layout</title>
<meta charset="utf-8">
</head>
<body>
<div>
<div>
<nav class="menuVertical" style="float:left; background:pink; min-height: calc(100vh - 75px); width:20%; ">
Menu Vertical
</nav>
<!-- Conteudo -->
<div class="conteudo" style="float:left; background:green; width:80%;">
<!-- Cabeçalho de navegação -->
<div style="background:blue;height:60px;margin-bottom:20px;">
Área de navegação
</div>
<!-- Conteudo -->
<div style="background:yellow;margin-left:10px;margin-right:10px;">
Conteudo <br>
Conteudo <br>
</div>
<footer style="background:gray;">
Footer
</footer>
</div>
</div>
</div>
</body>
</html>最佳答案
您可以使用 flexbox .
用 display: flex 将容器和导航包裹在父级中，以强制子级并排对齐。
因为你不想让导航改变大小，你可以给它一个设定的宽度，比如width: 150px;
最后，因为您希望容器改变大小以占用剩余空间，您可以应用flex-grow: 1;。
.flex {
display: flex;
}
nav {
width: 150px;
border: 1px solid green;
}
.container {
text-align: center;
flex-grow: 1;
border: 1px solid red;
}
.footer {
margin-top: 100px;
border: 1px solid blue;
}<div class="flex">
<nav>NAV</nav>
<div class="container">
CONTAINER
<div class="footer">
FOOTER
</div>
</div>
</div>关于html - 即使有动态父级也保持 div 固定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48430534/