Question

＆＃13;

html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-image: url(../images/bg.jpg);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100%;
}


/*----------------------Header Styling------------------------------------*/

header {
	background-color: white;
	border-bottom-style: solid;
	overflow: auto;
	height: 200px;
	font-family: "Freehand521 BT", Arial, Sans-serif;
}

header p {
	font-family: "Freehand521 BT", Arial, Sans-serif;
	margin: 20px 0px 0px 20px;
	font-size: 60px;

}

header img {
	float: right;
	border-left: solid;
}

/*-------------------------------Main Nav Styling--------------------------------*/

#mainlinks {
	margin-top: 60px;
}

#mainlinks ul {
	margin-bottom: 0px;
}

#mainlinks a {
	list-style-type: none;
	text-decoration: none;
	color: black;
	margin-right: 90px;
	margin-left: -10px;
	font-size: 25px;
}

#mainlinks li {
	display: inline;
	padding-right: 5px;
}

/*----------------------------------Secondary Nav Styling----------------------------------------------------*/


.secondlinks li {
	display: inline;
	list-style-type: none;
}

.secondlinks ul {
	padding-left: 0px;
}


/*-------------------------------------Main Content Styling--------------------------------------------------------*/

#contentwrap {
	background-color: rgba(231, 231, 231, .7);
	border-style: solid;
	border-radius: 10px;
	margin-top: 30px;
	margin-left: 20px;
	margin-right: 20px;
	padding: 15px;
	font-family: "Freehand521 BT", Arial, Sans-serif;
	font-size: 17px;

}

#contentwrap img {
	border-style: solid;

}
/*-------------------------------------------Footer Styling------------------------------------------------------*/

footer {
	background-color: #fff;
	border-top-style: solid;
	margin-top: 20px;
	width: 100%;
	height: 130px;
	font-family: "Freehand521 BT", Arial, Sans-serif;
	font-size: 15px;
}

#footernav {
	float: right;
}

#footernav li {
	display: inline;
}

#footernav a {
	text-decoration: none;
	margin-right: 30px;

}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Defenders Of The Stars!--The Official Sailor Moon Fanpage!</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" type="image/png" href="images/SM.ico">
	<link rel="stylesheet" type="text/css" href="style/style.css">
	<link rel="stylesheet" href="style/normalize.css">
</head>
<body>
	<header>
		<img src="images/HeaderSilouette.png" alt="Defenders Of The Stars Header" width="200" height="200">
		<p>Defenders of the stars!</p>
		<nav id="mainlinks">
			<ul>
				<li><a href="main.html">Home</a></li>
				<li><a href="ss.html">Sailor Senshi</a></li>
				<li><a href="villains.html">Villains</a></li>
			</ul>
		</nav>
	</header>
	<div id="contentwrap">
		<h1> Welcome Fans!</h1>
		<p>Welcome to the Official Sailor Moon Fanpage! Here you will find a lot of information about the Sailor Moon Universe! Including Characters and villains alike, As well as an overview of the story so far. We will also keep this Page updated with the latest happenings in the world of Sailor Moon!</p>
		<p><u>July 5 2014</u> - New Sailor Moon Anime, Sailor Moon Crystal is released!</p>
	</div>
	<footer>
		<p id ="copyright">&copy; Copyright 2016 Jorge Goris.<br />Designed and developed by Jorge Goris.</p>
		<nav id="footernav">
			<ul>
				<li><a href="main.html">Home</a></li>
				<li><a href="ss.html">Sailor Senshi</a></li>
				<li><a href="villains.html">Villains</a></li>
			</ul>
		</nav>
	</footer>
</body>
</html>

＆＃13;

这是我的代码段。在我的主页面中，我一直在页脚下方留出一点空间。设置高度似乎适用于其他页面，因为它们有很多内容。然而，我的主页并不是这样，页脚不会完全失败。我已经尝试了很多不同的方法来解决这个问题，我似乎无法做到这一点。我究竟做错了什么？

Answer 1

尝试在外部页脚元素上使用它：

Laravel

您可以使用填充，或继续使用public function getQuotes() { $quotes = \App\Models\Artist::all(); return compact('quotes'); //<-- This is just another way of writting ['quotes' => $quotes] }属性来进一步调整位置。如果您将其置于0（即＆＃34; position: absolute; bottom: 0;＆＃34;），则在底部属性中输入的数字应包括bottom。这个值是像素/来自/底部，所以添加更多将推动它。

Answer 2

应用此方法将页脚固定到底部，如果此行为仅适用于一个页面，请务必使用唯一的类。

pipeline:
  deploy:
    image: drillster/drone-rsync
    hosts: ["foo.com"]
    source: "./build/"
    target: "/home/app/deploy/${TIMESTAMP}/"

如果内容大于可用空间，您还可以添加

footer {
    position: fixed;
    bottom: 0;
}

或者，您应该探索使用flexbox来构建UI以及一些后备。这是一篇很好的文章https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

只需转到页脚样式并删除height属性：

身高：130px;

这将允许页脚调整自己的高度。

Answer 4

将此添加到#contentwrap：

padding-bottom: 130px; 
min-height: 100%;

这是footer：

position: relative;
margin-top: -130px;
clear: both;

如果您稍后更改了页脚的高度，请相应地更改上面的值。 Working codepen

页脚不会停留在我的某个页面的底部

4 个答案: