身体高度和页脚粘在底部的 CSS 问题

Question

在下面的代码中，我遇到了一些奇怪的问题。

1) mainContainer div 下方有一个 11 像素高的黑条，它不会消失。即使将 body 元素的绝对位置设置为 top、left、right、bottom 时也是如此。这会无缘无故地导致滚动条。

2) 页脚应始终贴在底部，但绝不应与mainBody div 重叠。为了实现这一点，我给了它一个绝对位置，并使其成为具有相对位置的mainContainer div 的子项。但它仍然会覆盖mainBody div 到一定高度。

一段时间以来，我一直在尝试自己解决这些问题，但我就是想不通。所以现在我希望你们能帮助我。

html {
	height: 100%;
}
body {
	height: 100%;
	padding: 0;
	margin: 0;
}

@font-face {
    font-family:"Glass Antiqua";
    src: url("GlassAntiqua-Regular.ttf");
}

body {
	font-family: Glass Antiqua;
	color: White;
	font-size: 50px;
	background-color: black;
}

header #logo h1 {
	margin-top: 10px;
}

nav ul li:hover > ul {
	display: block;
}

nav ul {
	width: calc(100% - 40px);
	margin-top: 0;
	background: #234e60; 
	background: linear-gradient(top, #234e60 0%, #245163 100%);  
	background: -moz-linear-gradient(top, #234e60 0%, #245163 100%); 
	background: -webkit-linear-gradient(top, #234e60 0%,#245163 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;  
	list-style: none;
	position: relative;
	display: inline-table;
	font-size: 20px;
}

nav ul:after {
	content: ""; clear: both; display: block;
}

nav ul li:first-child {
	margin-left: 8px;
}

nav ul li {
	float: left;
}
nav ul li:hover {
	background: #193e4e;
	background: linear-gradient(top, #193e4e 0%, #1a4050 40%);
	background: -moz-linear-gradient(top, #193e4e 0%, #1a4050 40%);
	background: -webkit-linear-gradient(top, #193e4e 0%,#1a4050 40%);
}
nav ul li:hover a {
	color: #fff;
}

nav ul li a {
	display: block; padding: 25px 35px;
	color: #fff; text-decoration: none;
}

footer {
	bottom: 0;
    height: 150px;
    position: absolute;
}

#mainContainer {
	margin: auto;
	padding-left: 25px;
	padding-right: 25px;
	width: 830px;
	min-height: 100%;
	background: #377a96;
	position: relative;
}

#logo {
	background: url(http://www.icecub.nl/images/banner_bats.png);
	height: 130px;
	margin-top: 0px;
	border: 1px solid black;
	text-align: center;
}

#hr_lines {
	width: 100%;
	height: 3px;
	background: white;
	position: relative;
}

#hr_blue {
	width: 100%;
	height: 1px;
	position: absolute;
	top: 1px;
	background: #234e60;
}

#mainBody {
	height: 500px;
	border: 1px solid red;
}

#img_footer {
	width: 830px;
	height: 150px;
}

<div id="mainContainer">
	<header>
		<div id="logo">
			<h1>Welcome</h1>
		</div>
		<div id="hr_lines">
			<div id="hr_blue"></div>
		</div>
		<nav>
			<ul>
				<li><a href="home.html">Home</a><li>
				<li><a href="introductie.html">Introductie</a></li>
				<li><a href="opleiding.html">Mijn Opleiding</a></li>
				<li><a href="werk.html">Eigen Werk</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</nav>
	</header>
	<div id="mainBody"></div>
	<footer>
		<img src="http://www.icecub.nl/images/boo.png" id="img_footer" alt="Afsluiting" />
	</footer>
</div>

Answer 1

将line-height: 0px; 添加到页脚 - 这将避免页脚图像下方的任何额外空间（这会产生溢出）。

另外，给#mainContainer 一个大约为 ca 的 padding-bottom。 160px 以避免页脚重叠并将其最小高度更改为calc(100% - 160px)：

html {
	height: 100%;
}
body {
	height: 100%;
	padding: 0;
	margin: 0;
}

@font-face {
    font-family:"Glass Antiqua";
    src: url("GlassAntiqua-Regular.ttf");
}

body {
	font-family: Glass Antiqua;
	color: White;
	font-size: 50px;
	background-color: black;
}

header #logo h1 {
	margin-top: 10px;
}

nav ul li:hover > ul {
	display: block;
}

nav ul {
	width: calc(100% - 40px);
	margin-top: 0;
	background: #234e60; 
	background: linear-gradient(top, #234e60 0%, #245163 100%);  
	background: -moz-linear-gradient(top, #234e60 0%, #245163 100%); 
	background: -webkit-linear-gradient(top, #234e60 0%,#245163 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;  
	list-style: none;
	position: relative;
	display: inline-table;
	font-size: 20px;
}

nav ul:after {
	content: ""; clear: both; display: block;
}

nav ul li:first-child {
	margin-left: 8px;
}

nav ul li {
	float: left;
}
nav ul li:hover {
	background: #193e4e;
	background: linear-gradient(top, #193e4e 0%, #1a4050 40%);
	background: -moz-linear-gradient(top, #193e4e 0%, #1a4050 40%);
	background: -webkit-linear-gradient(top, #193e4e 0%,#1a4050 40%);
}
nav ul li:hover a {
	color: #fff;
}

nav ul li a {
	display: block; padding: 25px 35px;
	color: #fff; text-decoration: none;
}

footer {
	bottom: 0;
    height: 150px;
    position: absolute;
    line-height: 0px;
}

#mainContainer {
	margin: auto;
	padding-left: 25px;
	padding-right: 25px;
    padding-bottom: 160px;
	width: 830px;
	min-height: calc(100% - 160px);
	background: #377a96;
	position: relative;
}

#logo {
	background: url(http://www.icecub.nl/images/banner_bats.png);
	height: 130px;
	margin-top: 0px;
	border: 1px solid black;
	text-align: center;
}

#hr_lines {
	width: 100%;
	height: 3px;
	background: white;
	position: relative;
}

#hr_blue {
	width: 100%;
	height: 1px;
	position: absolute;
	top: 1px;
	background: #234e60;
}

#mainBody {
	height: 500px;
	border: 1px solid red;
}

#img_footer {
	width: 830px;
	height: 150px;
}

<div id="mainContainer">
	<header>
		<div id="logo">
			<h1>Welcome header</h1>
		</div>
		<div id="hr_lines">
			<div id="hr_blue"></div>
		</div>
		<nav>
			<ul>
				<li><a href="home.html">Home</a><li>
				<li><a href="introductie.html">Introductie</a></li>
				<li><a href="opleiding.html">Mijn Opleiding</a></li>
				<li><a href="werk.html">Eigen Werk</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</nav>
	</header>
	<div id="mainBody"></div>
	<footer>
		<img src="http://www.icecub.nl/images/boo.png" id="img_footer" alt="Afsluiting" />
	</footer>
</div>

Answer 2

我通过将图像设置为适合您的页脚 div 中的块解决了问题 1：

footer {
    bottom: 0;
    height: auto;
    display: block;
    position: absolute;
}

#img_footer {
    width: 830px;
  display: block;
    height: 150px;
}

在此处查看 jsfiddle：https://jsfiddle.net/vupm4fww/6/

编辑问题 2 只需设置相对于您的页脚的位置即可。

Answer 3

您可以将overflow: hidden 添加到您的页脚，或者只是调整它的高度（因为150px; 搞砸了）

https://jsfiddle.net/8o9ufozs/