Question

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

1）mainContainer div下面有一个11px高度的黑条，它不会消失。即使在将body，left，right，bottom设置为0的身体元素绝对位置时，也会毫无理由地导致滚动条。

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一个填充底部。 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/

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

3 个答案: