将页脚放在底部？

Question

我在尝试使用 CSS 将我网站的页脚放在底部时遇到了问题。我已尝试在 Internet 上找到的几种方法来解决此问题，但其中 none 行得通。我尝试打开一个具有相对位置的 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>

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

Answer 1

我建议您考虑在 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，我虔诚地使用它来将页脚保持在页面底部。

Answer 2

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

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

Answer 3

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

这一变化是给页脚一个固定的位置，而不是给它一个绝对或相对位置。在你的问题中你说你想要它在底部并给页脚一个固定的位置，一个 'bottom' 值为 10px，一个 'right' 值为 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>

更新

我刚刚在你的问题的评论中看到你不想使用固定位置。

请考虑以下几点：

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>

Answer 4

将相对位置属性添加到 html 标记并将绝对位置添加到页脚，如下所示和页脚，这将始终在底部创建带有 class "footer" 的元素页面内容

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

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

将页脚放在底部？

placing footer at the bottom?

html

css

positioning

footer

更新