我在尝试使用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 © AUFA</p>
</footer>
</body>
</html>
请帮助解决我的问题， 提前谢谢。
答案 0 :(得分：0)
我建议您考虑在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，以便将页脚保留在页面底部。
答案 1 :(得分：0)
解决问题的一个非常简单的方法是清除页脚之前的浮动文章。最佳解决方案是在页脚风格中加入以下内容; “明确：既;”如下所示 页脚{ 明确：两者; 宽度：100％; 身高：10％; 位置：相对; 底部：0％; 填充：1％; 背景颜色：黑色; 白颜色; }
答案 2 :(得分：0)
使用原始答案中的代码，只更改3行（我只想要一个快速演示，以便您能够查看）。
这一改变是给页脚一个固定的位置，而不是给它一个绝对或相对的位置。在你的问题中，你说你想要它在底部，并给页脚一个固定的位置，一个底部＆＃39;价值10px，而权利＆＃39;值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 © AUFA</p>
</footer>
</body>
</html>
我刚刚在您的问题评论中看到您不想使用固定职位。
请考虑以下事项：
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 © AUFA</p>
</footer>
</body>
</html>
答案 3 :(得分：0)
将位置相对属性添加到html标记并将绝对位置设置为页脚，如下所示和页脚，这将始终使用class＆＃34; footer＆＃34;在页面内容的底部
html {
min-height:100%;
position:relative;
}
.footer {
position: absolute;
bottom:0;
}