将图像高度设置为100vh会导致与其他元素重叠

Question

我正试图使用Bootstrap 4创建一个包含页眉、页脚和主要内容的页面。主要内容应填充页眉下方的空格，页脚应位于页眉下方。

我试图通过在主要内容上设置100vh的高度来做到这一点，这很有效，但当我插入图像时，它与页脚重叠。我哪里错了？为什么图像没有调整大小？

#content-header {
background: red;
color: white;
}
#content-main {
background: blue;
color: white;
height: 100vh;
}
#content-header {
background: red;
color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="app" class="h-100">
<div id="content" class="d-flex flex-column">
<nav id="content-header" class="p-4">
<div class="navContent d-flex justify-content-between">
Navbar
</div>
</nav>
<main id="content-main" class="flex-grow-1 p-5">
Main Content
<img class="img-fluid" src="https://placeimg.com/1000/1000/any">
</main>
<div id="footer" class="p-4">
Footer Content
</div>
</div>
</div>

Answer 1

添加min-height而不是height

#content-main {
background: blue;
color: white;
min-height: 100vh;
}

#content-header {
background: red;
color: white;
}
#content-main {
background: blue;
color: white;
min-height: 100vh;
}
#content-header {
background: red;
color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="app" class="h-100">
<div id="content" class="d-flex flex-column">
<nav id="content-header" class="p-4">
<div class="navContent d-flex justify-content-between">
Navbar
</div>
</nav>
<main id="content-main" class="flex-grow-1 p-5">
Main Content
<img class="img-fluid" src="https://placeimg.com/1000/1000/any">
</main>
<div id="footer" class="p-4">
Footer Content
</div>
</div>
</div>

Answer 2

您希望整个布局的高度为100%，而不仅仅是#content-main。

因此，您希望在#content上设置min-height:100vh(min-vh-100(。然后，flex-grow-1将允许main填充导航和页脚之间的高度：

<div id="app">
<div id="content" class="d-flex flex-column min-vh-100">
<nav id="content-header" class="p-4">
<div class="navContent d-flex justify-content-between"> Navbar </div>
</nav>
<main id="content-main" class="flex-grow-1 p-5 overflow-auto">
Main Content
<img class="img-fluid" src="https://placeimg.com/1000/1000/any">
</main>
<div id="footer" class="p-4"> Footer Content </div>
</div>
</div>

https://codeply.com/p/gnLCSZG9gy

Answer 3

试试这个代码。我添加了最大宽度：100%和高度：自动到图像

	#content-header {
				background:red;
				color:white;
			}
			#content-main {
				background:blue;
				color:white;
				height:100vh;
			}
			#content-header {
				background:red;
				color:white;
			}
#background-img{
max-width: 100%;
height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="app" class="h-100">
		
			<div id="content" class="d-flex flex-column">
				
				<nav id="content-header" class="p-4">
				
					<div class="navContent d-flex justify-content-between">
				
						Navbar
					
					</div>
				
				</nav>
				<main id="content-main" class="flex-grow-1 p-5">
					Main Content
					<img id="background-img" class="img-fluid" src="https://placeimg.com/1000/1000/any">
				</main>
				<div id="footer" class="p-4">
				
					Footer Content
	
				</div>
			</div>
		</div>

Answer 4

请将height: 100vh更改为高度：100%

#content-main {
background: blue;
color: white;
height: 100%;
}

Answer 5

你的问题是对的。因为你设置的主要内容高度是100vh，但如果你观察到你的图像大小是大于屏幕高度。你的屏幕大小是700px到800px，但图像大小是1000px。所以你的图像和页脚重叠。