页脚不会停留在移动视图中答案

【问题标题】：Footer doesn't stay down in mobile view页脚不会停留在移动视图中
【发布时间】：2020-02-18 18:35:14
【问题描述】：

所以我只是在玩 CSS 并使用“vh”为元素赋予高度，以便我可以使它们更大并使用滚动动画。但是，当我使用它时，无论我使用什么 css 技巧，我在移动视图中的页脚都不会停留

我已经尝试了以下链接来解决我的问题，

how to keep your footer where it belongs

footer not sitting at bottom of the page

第三种 URL 可以正常工作，但我无法滚动浏览部分内容。

html,body {
	height: 100%;
	font-family: 'Open Sans', sans-serif;
	background: #ec9b3b;
	color: #fff;
}

.slide-right {
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.3s both;
	animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.3s both;
}
.banner-text {
	color: #fff;
	padding-top: 8%;
	padding-left: 8%;
	padding-right: 8%;
}
.navbar {
	min-height: 14vh;
}

.navbar-brand {
	padding: 0 15px;
	height: 14vh;
	line-height: 14vh;
}

.navbar-toggle {
	/* (80px - button height 34px) / 2 = 23px */
	margin-top: 23px;
	padding: 9px 10px !important;
}

@media (min-width: 768px) {
	.navbar-nav > li > a {
		/* (80px - line-height of 27px) / 2 = 26.5px */
		padding-top: 26.5px;
		padding-bottom: 26.5px;
		line-height: 27px;
	}
}

<!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">
	<!-- Bootstrap CSS Requirement -->
	<link rel="stylesheet" 
		href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
		crossorigin="anonymous"
	>
	<!-- AOS CSS Library -->
	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
	<!-- Animate.css file for animations -->
	<link rel="stylesheet" type="text/css" href="animate.css">
	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:600|Roboto+Slab&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	<title>SiddhantNair</title>
</head>

<body>
	<div style="padding: 20px;">
		<nav class="navbar navbar-expand-lg navbar-dark">
				<a class="navbar-brand" href="">NairSiddhant.dev</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
					
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav mr-auto">
						<li class="nav-item">
							<a class="nav-link" href="">Home</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="">About Me</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Dropdown
							</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</li>
					</ul>
				</div>
			</nav>
	</div>

	<div style="height: 80vh;">
		<h1 class="slide-right banner-text">Welcome to my Website,</h1>
		<h1 class="slide-right" style="padding-left: 8%; padding-right: 8%;">You can learn more about my projects here!</h1>
	</div>
	<div class="container" style="padding: 32px; height: 100vh;">
		<div data-aos="zoom-in-up">
			<p class="text-justify">
				Quisque eget tristique neque. Praesent lacinia massa quis erat malesuada vulputate. 
				Curabitur rhoncus ligula est, vel ullamcorper dolor iaculis ut. Maecenas dictum ornare 
				sagittis. In maximus efficitur pharetra. Suspendisse potenti. Sed quis pulvinar massa, 
				id cursus mauris. Proin eget tempor tellus.
			</p>
		</div>
	</div>

	<footer style="background: #fff; height: 8vh;">
		<p style="color: black; margin: auto; padding: 16px; padding-left: 8%;">copyright &copy; 2019 Siddhant Nair.</p>
	</footer>

	<!-- Bootstrap JS Requirements -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
		crossorigin="anonymous">
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
		crossorigin="anonymous">
	</script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
		crossorigin="anonymous">
	</script>
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
	<script>
		AOS.init();
	</script>
</body>
</html>

【问题讨论】：

标签： html css sticky-footer

【解决方案1】：

请检查下面的代码。我试过了，它可以让它在底部粘起来：

position:fixed;width:100%; bottom:0px;"

【讨论】：

非常感谢，但我想通了。代码完全符合我们在技术上的要求，所以我意识到我应该将其指定为最小高度，而不是指定 100vh 的固定高度，然后将页脚推到应有的位置。

【解决方案2】：

这是实现粘性页脚的最简单技术。

body {
  background: black;
}
#container {
  max-height: 300px;
  background: gold;
  overflow: auto;
}
#content {
  padding: 20px;
  overflow-y: auto;
  background: white;
  height: 1200px;
}
#sticky {
  padding: 15px;
  background: grey;
  position: sticky;
  bottom: 0;
}

<div id="container">
  <div id="content">
	<br /><br />
	<div>
	  Main content
	</div>
  </div>
  <div id="sticky">You could wrap your footer's content inside this div</div>
</div>

【讨论】：

【解决方案3】：

我会试试这个例子：

https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3

这个 IMO 是最好的方法之一。 Flexbox 是一个不错且易于理解的概念。

【讨论】：