如果我只需要在一页中使用粘性页脚怎么办？

Question

我的主页是空的 div，只有一张背景图片，所以我制作了一个粘性页脚，这样它就不会折叠，这是这样做的：

* { 
    margin:0; 
    padding:0; 
} 

html, body, #wrapper{ 
    height: 100%; 
}

body > #wrapper {
    height: 100%; 
    min-height: 100%;
}

#main { 
    padding-bottom: 40px; /* Misma altura del footer, esto es para que si el contenido crece sea el padding el que se mete por detrás del footer y no parte del contenido */
}  

#footer { 
    position: relative;
    margin-top: -40px; /* La altura del footer en negativo, para hacer que suba y no haya scroll vertical */
    height: 40px;
    clear:both;
    background: #c00;
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <link href="style.css" rel="stylesheet" type="text/css"/>
      <title>Plantilla 1</title>
  </head>
  <body>
<div id="wrapper">
    <div id="header">    
      Aqui va el header       
    </div><!--end header -->

    <div id="navbar">
      <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
    </div><!--end navbar -->

    <div id="main">
      <div id="content">
        Aqui va el contenido de la web
      </div><!--end content-->
     
      <div id="sidebar">
      </div><!--end sidebar-->
    </div><!--end main-->
</div>

<div id="footer">
  Aqui va el footer
</div>
</body>
</html>

但现在我正在制作另一个页面，我需要内容将页脚推到浏览器底部之外，但我无法让它工作。我正在考虑制作两种不同的 CSS 样式表，一种用于主页，一种用于网站的其余部分，您觉得如何？

谢谢。

Answer 1

不要为 body/html/wrapper 指定高度，只需将最小高度设为 100%。

html {
    height:100%;
}

body, #wrapper { 
    min-height: 100%; 
}

这样所有内容都可以变大，但如果没有足够的内容将其向下推，页脚仍应显示在底部。

正文 > #wrapper 部分应删除。

如果我只需要在一页中使用粘性页脚怎么办？

What can I do if I only need sticky footer in one page?

html

css

footer