Question

我现在一直在努力解决这个问题。

我想要做的只是让跟随堆叠，就像一个有1列，3行的表一样。我试图放弃旧的HTML和CSS方法，用于优选的HTML5页面结构化方法。

像这样......但没有任何重叠......

 ----------------------------
|    | header           |    |
|     ------------------     |
|    |                  |    |
|    | content          |    |
|    |                  |    |
|     ------------------     |
|    | footer           |    |
-----------------------------

页脚最终会与内容重叠，内容大于页面本身（这是有意义的，因为它是100％......）。我尝试了一些涉及'stickyfooter'的解决方法，但我似乎无法让它工作......我以为我会从头开始重新启动 - 我应该知道什么？有什么明显的东西我不见了吗？

CSS：

header{
background-color: #000000;
height: 200px;
width 1000px;
margin-left:auto;
margin-right:auto; 
}
.content{
background-color: #FFFFFF;
height: 100%;
margin-left:auto;
margin-right:auto; 
}
footer{
background-color: #000000;
width 1000px;
height: 200px;
margin-left:auto;
margin-right:auto; 
}

HTML：

<header>
 Header Content
</header>
<div class="content">
 Page Content goes here
</div>
<footer>
 Footer Content
</footer>

Answer 1

以下是您要完成的简单demo。

header, footer, .content {
  background: salmon;
  width: 500px;
  height: 100px;
  margin:0 auto;
}

.content{
  background: white; 
  min-height: 600px;
}

在您的代码中，您在header和footer（width 1000px;）中缺少冒号，并且您没有定义width的{{1}}

您还可以将选择器与逗号组合使用，并使用.content简写。

Answer 2

尝试像这样声明你的边距：

margin:0 auto;

这将导致顶部和底部边距为0px，左右边距居中，就像现在一样。

我不禁认为您的内容/页脚问题是由内容部分的高度为100％引起的。我喜欢将高度设置为指定的长度，或者设置为auto。自动允许您在呈现页面时不知道高度，但相应地适应。

同时设置内容部分的宽度将使其与页面的其余部分一样居中。

Answer 3

在网络上进行了一些窥探之后，我设法得到了我需要的工作，包括粘性页脚，所有css3和html5兼容。您可以在jsfiddle上看到此信息。尽管如此，代码在这里：

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>
   Title
  </title>

  <style type="text/css">
   html, body {
    height: 100%;
   }

    * {
       padding:0px;
       margin:0px;
   }

   #backColor1, #main, #copyright {
    width: 900px;
   }

   #backColor1 {
    position: fixed; 
    z-index: -1; 
    left: 50%; 
    height: 32767px;
   }

   #backColor2 {
    position: relative; 
    left: -50%; 
    height: 100%; 
    background-color: #FF0000;
   }

   #main {   background-color: #FFCCFF;
    position: relative; 
    padding-bottom: 150px;
    margin: 0 auto;
    overflow:auto;
   }

   #wrap {
   min-height: 100%;
   width: 100%;
   }


   #header {
   background-color: #0000FF;
   height: 150px;
   width: 100%;
   }

   #nav {
   height: 40px;
   background-color: #FFFF00;
   }

   #footer {
    position: relative;
       margin-top: -150px; /* negative value of footer height */
       height: 150px;
       clear:both;
       background-color: #333333;
       text-align: center;

       } 

      #copyright {
      height: 100%;
      margin: 0 auto;
      }

   /*Opera Fix*/
   body:before {
       content:"";
       height:100%;
       float:left;
       width:0;
       margin-top:-32767px;/
   }

/*
##########################################################################
*/   

  #footer #copyright p {
   font-family: verdana;
   color: #AAAAAA;
   text-align: justify;
   font-size: 0.7em;
  } 

  </style>

<!-- ie sticky-footer fix !-->  
  <!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->


 </head>
<body>

<div id="backColor1">
    <div id="backColor2">
 </div>
</div>

<div id="wrap">
    <div id="header">
     <p>
      header
     </p>
    </div>
    <nav id="nav">
     <p>
      Link1 Link2 Link3
     </p>
    </nav>
 <div id="main">
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>

 </div>
</div>

<div id="footer">
 <div id="copyright">
 <p>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
 </p>
 </div>
</div>

</body>
</html>

HTML5 <header> <div> <footer>简单地堆叠</footer> </div> </header>

3 个答案: