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%; 
}

这样一切都可以变得更大但是如果没有足够的内容来推倒它，仍然应该让页脚显示在底部。

身体＆gt; #wrapper部分应该删除。

如果我只需要在一个页面中粘贴页脚，我该怎么办？

1 个答案: