将页脚放在底部？答案

【问题标题】：placing footer at the bottom?将页脚放在底部？
【发布时间】：2016-03-30 09:30:26
【问题描述】：

我在尝试使用 CSS 将网站页脚置于底部时遇到问题。我尝试了几种在互联网上找到的方法来解决这个问题，但都没有奏效。我试图用相对位置打开一个div 并使用绝对定位将我的页脚放在其中，尽管它再次不起作用。这是我的代码，

body {
	background-color: white;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	font-size: 20px;

}

header {
	background-color: #292627;
	width: 100%;
	height: 40%;
	font-size: 2vmin;
	color: white;
	padding: 1%;
	position: relative;
	
}

#logo {

	height: 50%;
}
aside {
	position: relative;
	background-color: yellow;
	width: 20%;
	font-size: 3vmin;
	margin: 0%;
	padding: 1%;
	float: left;
}

article {
	position: relative;
	float: right;
	width: 75%;
	padding: 1%;
	font-size: 3vmin;
 
}

footer {
	width: 100%;
	height: 10%;
	position: relative;
	bottom: 0%;
	padding: 1%;
	background-color: black;
	color: white;
}

#copyright {
	bottom: 0%;
	text-align: center;
	font-size: 3vmin;
	color: red;
}

<!DOCTYPE html> 
<html>
	<head>
		<title> AUFA projects</title>
		<script src = "script.js"></script>	
		<link rel="stylesheet" type = "text/css" href = "stylesheet_home.css">

	</head>
	<body>
		<header>
			<a href="http://aufaprojects.ml"> <img src="recources/aufa_proj.png" alt="AUFAprojects" id="logo"></a>
			<h1>AUFA Projects</h1>
		</header>
		<aside>
			<p>What you are looking for is Viewport Percentage Units: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

			The values are: ‘vw’ (viewport width), ‘vh’ (viewport height), ‘vmin’ (the smaller of vw or vh), ‘vmax’ (the larger or vw or vh).

			1 v == 1% of the initial containing block

			using it looks like this:

			p {font-size: 4vw;}

			As you can see, when the viewport widt</p>

		</aside>
		<article>
			<h1> About us </h1>
			<p>AUFA is a group of AUA students, who post their project, programs and other data in this website. You are allowed to use the content or modify it, however you should give credits in the following form
			 "The original code was created by AUFA (aufaprojects.ml)"</p>
			
		</article>
		
		<footer>
				
			<p id = "copyright"> Copyright &#169; AUFA</p>

		</footer>		

	</body>


</html>

请帮助解决我的问题，提前致谢。

【问题讨论】：

页脚位置应该是absolote，body relative也应该abulote body标签下的其他标签
为什么不使用固定位置？您是要将其放置在视口窗口底部还是网页底部
@devpro 具有绝对定位，它仅适用于固定屏幕。滚动时它停留在同一个地方
@Adjit 我不想使用固定定位，而是想将页脚放在网页底部
是的@adjit 是正确的位置固定或改变我的建议

标签： html css positioning footer

【解决方案1】：

解决问题的非常简单的方法是清除页脚之前的浮动文章。最好的解决方案是在页脚clear: both; 的样式中包含以下内容，如下所示：

footer {
  clear: both;
  width: 100%;
  height: 10%;
  position: relative;
  bottom: 0%;
  padding: 1%;
  background-color: black;
  color: white;
}

【讨论】：

非常感谢，这是一个非常简单有效的解决方案

【解决方案2】：

将位置相对属性添加到html标签并将绝对位置添加到页脚和页脚，如下所示，这将始终使具有“页脚”类的元素位于页面内容的底部

html {
 min-height:100%;
 position:relative;
}

.footer {
 position: absolute;
 bottom:0;
}

【讨论】：

【解决方案3】：

使用您原始答案中的代码，并且只更改 3 行（我只是想要一个快速演示供您查看）。

这一变化是给页脚一个固定的位置，而不是给它一个绝对或相对的位置。在你的问题中你说你想要它在底部并给页脚一个固定的位置，一个 10px 的“底部”值和一个 10px 的“正确”值，你总是可以保证它会在底部屏幕右上角。

body {
	background-color: white;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	font-size: 20px;

}

header {
	background-color: #292627;
	width: 100%;
	height: 40%;
	font-size: 2vmin;
	color: white;
	padding: 1%;
	position: relative;
	
}

#logo {

	height: 50%;
}
aside {
	position: relative;
	background-color: yellow;
	width: 20%;
	font-size: 3vmin;
	margin: 0%;
	padding: 1%;
	float: left;
}

article {
	position: relative;
	float: right;
	width: 75%;
	padding: 1%;
	font-size: 3vmin;
 
}

footer {
	position: fixed;
	bottom: 10px;
	right:10px;
	background-color: black;
	color: white;
}

#copyright {
	bottom: 0%;
	text-align: center;
	font-size: 3vmin;
	color: red;
}

<!DOCTYPE html> 
<html>
	<head>
		<title> AUFA projects</title>
		<script src = "script.js"></script>	
		<link rel="stylesheet" type = "text/css" href = "stylesheet_home.css">

	</head>
	<body>
		<header>
			<a href="http://aufaprojects.ml"> <img src="recources/aufa_proj.png" alt="AUFAprojects" id="logo"></a>
			<h1>AUFA Projects</h1>
		</header>
		<aside>
			<p>What you are looking for is Viewport Percentage Units: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

			The values are: ‘vw’ (viewport width), ‘vh’ (viewport height), ‘vmin’ (the smaller of vw or vh), ‘vmax’ (the larger or vw or vh).

			1 v == 1% of the initial containing block

			using it looks like this:

			p {font-size: 4vw;}

			As you can see, when the viewport widt</p>

		</aside>
		<article>
			<h1> About us </h1>
			<p>AUFA is a group of AUA students, who post their project, programs and other data in this website. You are allowed to use the content or modify it, however you should give credits in the following form
			 "The original code was created by AUFA (aufaprojects.ml)"</p>
			
		</article>
		
		<footer>
				
			<p id = "copyright"> Copyright &#169; AUFA</p>

		</footer>		

	</body>


</html>

更新

我刚刚在您的问题的 cmets 中看到您不想使用固定位置。

请考虑以下几点：

body {
	background-color: white;
	width: 100%;
	height: 100%;
	margin: 0;
    padding:0; 
	position: absolute;
	font-size: 20px;

}

header {
	background-color: #292627;
	width: 100%;
    height:40%;
	font-size: 2vmin;
	color: white;
	padding: 1%;
	position: relative;
	
}

#logo {

	height: 50%;
}
aside {
	background-color: yellow;
	width: 20%;
	font-size: 3vmin;
	margin: 0%;
	padding: 1%;
	float: left;
}

article {
	float: right;
	width: 75%;
	padding: 1%;
	font-size: 3vmin;
}

footer {
    width:100%;
    display:block;
	background-color: black;
	color: white;
}

#copyright {
	bottom: 0%;
	text-align: center;
	font-size: 3vmin;
	color: red;
}
.aside-article-wrapper{
    display:table;
    clear:both;
}
.bottom {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
}

<!DOCTYPE html> 
<html>
	<head>
		<title> AUFA projects</title>
		<script src = "script.js"></script>	
		<link rel="stylesheet" type = "text/css" href = "stylesheet_home.css">

	</head>
	<body>
		<header>
			<a href="http://aufaprojects.ml"> <img src="recources/aufa_proj.png" alt="AUFAprojects" id="logo"></a>
			<h1>AUFA Projects</h1>
		</header>
        <section class="aside-article-wrapper">
   		  <aside>
			<p>What you are looking for is Viewport Percentage Units: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

			The values are: ‘vw’ (viewport width), ‘vh’ (viewport height), ‘vmin’ (the smaller of vw or vh), ‘vmax’ (the larger or vw or vh).

			1 v == 1% of the initial containing block

			using it looks like this:

			p {font-size: 4vw;}

			As you can see, when the viewport widt</p>

  		  </aside>
		  <article>
			<h1> About us </h1>
			<p>AUFA is a group of AUA students, who post their project, programs and other data in this website. You are allowed to use the content or modify it, however you should give credits in the following form
			 "The original code was created by AUFA (aufaprojects.ml)"</p>
			
		  </article>
		</section>
		<footer>
				
			<p id = "copyright"> Copyright &#169; AUFA</p>

		</footer>		

	</body>


</html>

【讨论】：

【解决方案4】：

我建议您考虑使用http://ryanfait.com/sticky-footer/ 上的粘性页脚代码。它要求您通过在除页脚之外的所有内容周围创建一个包装 div 并添加以下 css 代码来稍微重构您的代码

{
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

这应该做你想做的。

另外，如果您使用的是 SASS Compass，您可以查看sticky footer module，我非常虔诚地使用它来将页脚保持在页面底部。

【讨论】：