CSS仅删除一页上的导航栏和页脚之间的边距

Question

我有一个带有图像和深色覆盖层的着陆页，我要占据导航栏和页脚之间的所有空间，而两者之间没有空白。我最初的问题是，当内容很短时，将页脚固定在底部，因此页脚不会位于页面的一半，而且如果要滚动大量数据并将页脚保持在底部，也不会总是显示页脚，直到用户向下滚动。我在这里bootstrap sticky footer but no scroll content找到了一种解决方案，当背景为白色时，它适用于我的网站，因为无法看到导航栏和标题之间的边距，但是当背景较暗且有白色间隙时，则无法看到。有没有一种方法可以仅在具有深色背景的页面上消除页边空白，而保留所有其他页面的格式？我仅在此问题页面上使用CSS类着陆，内部着陆，深色覆盖，但在所有其他页面上的CSS文件中使用其余类，但它们具有白色背景。我也在使用Bootstrap 4.3.1。

import React from 'react';
import './App.css';

function App() {
	return (
		<div className='App'>
			{/* Navbar */}
			<nav className='navbar navbar-expand-sm navbar-dark bg-dark'>
				<div className='container'>
					<a className='navbar-brand' href='/'>
						Navbar
					</a>
					<button
						className='navbar-toggler'
						type='button'
						data-toggle='collapse'
						data-target='#mobile-nav'
					>
						<span className='navbar-toggler-icon' />
					</button>
				</div>
			</nav>
			{/* Landing Page Data */}
			<div className='wrapper'>
				<div className='landing'>
					<div className='dark-overlay landing-inner text-light'>
						<div className='container'>
							<div className='row'>
								<div className='col-md-12 text-center'>
									<h1 className='display-3 mb-4'>Title</h1>
									<p className='lead'> Slogan</p>
									<hr />
									<a href='/register' className='btn btn-lg btn-info mr-2'>
										Sign Up
									</a>
									<a href='/login' className='btn btn-lg btn-light'>
										Login
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div className='footerfix'></div>
			{/* footer */}
			<footer className='bg-dark text-white p-3 text-center'>
				Copyright &copy; {new Date().getFullYear()} Title
			</footer>
		</div>
	);
}

export default App;

img {
	width: 100%;
	height: 100%;
}

.landing {
	position: relative;
	background: url('./img/pexels-photo-1640771.jpeg') no-repeat;
	background-size: cover;
	background-position: center;
	height: 100vh;
}

.landing-inner {
	padding-top: 80px;
}

.dark-overlay {
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Footer */

html,
body {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
}
.wrapper {
	position: relative;
	overflow: hidden;
	margin-top: 10px;
}
.footerfix {
	height: 4rem;
}
footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
}

Answer 1

这里没有足够的样式代码来确定出哪里出问题了。我注意到的一件事是，您有一个

.landing-inner {
    padding-top: 80px;
}

但是我可以看到这是一个内部div，您可以为您的NAV粘贴CSS代码，还是@Good Samaritan要求您粘贴到其中的链接无效？

我的主要建议是打开chrome / firefox检查器工具，并确定在NAV和DIV className =“ wrapper”元素上使用边距/填充的位置。