Question

因此，我只是在玩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>

Answer 1

我会尝试以下示例：

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

此IMO是执行此操作的最佳方法之一。 Flexbox是一个不错的，容易理解的概念。

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

Answer 3

请在下面检查此代码。我已经尝试过了，它可以使它在底部具有粘性：

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

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

3 个答案: