Question

如何创建占据屏幕100％并且彼此相邻的两个div？当视图变暗时，第一个视图不会被重定向。

 ___________________________
|     |                     |
| nav |  container          |
|     |                     |
|     |                     |
|_____|_______footer________|

缩小屏幕后

  ____________________
 |     |              |
 | nav |  container   |
 |     |              |
 |_____|____footer____|

容器会减小宽度但导航不会

＆＃13;

<!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>

＆＃13;

Answer 1

您可以使用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>

Answer 2

使用Flexbox！外部容器容纳2个项目，主容器和页脚，并且方向设置为列，因此一个位于另一个的顶部。内部容器默认设置为row，还有2个项目，左侧菜单和内容项。

外部容器的最小高度设置为100vh（遮阳板高度），这意味着它始终是屏幕的100％，容器类将其自身高度设置为此前容器的90％，而页脚留下10％。您可以随意使用这些数字进行调整。

.outside-container {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
 }

.container {
     display: flex;
     min-height: 90%;
 }

.menuVertical {
    float:left;
    background:pink;
    min-height: calc(100vh - 75px); 
    width:20%;
    }
    
.conteudo {
    float:left;
    background:green;
    width:80%;
    }
    
.header {
    background:blue;
    height:60px;
    margin-bottom:20px;
    }

.content {
    background:yellow;
    margin-left:10px;
    margin-right:10px;
}

footer {
    background:gray
}

<!DOCTYPE html>
<html lang="pt-br">
    <head>
		<title>Sibcom - Layout</title>
		<meta charset="utf-8">
	</head>
  
	<body>
  <div class='outside-container'>
		<div class='container'>
				<nav class="menuVertical"> 
					Menu Vertical
				</nav>
				
				<!-- Conteudo -->
				<div class="conteudo"> 
					<!-- Cabeçalho de navegação -->
					<div class="header">
						Área de navegação
					</div>
					
					<!-- Conteudo -->
					<div class="content">
						Conteudo <br>
						Conteudo <br>			
					</div>

		    </div>
      

    </div>
    
      <footer>
        Footer
      </footer>
    </div>
	</body>
</html>

即使使用动态父级也可以保持div固定

2 个答案: