1

我已经为此苦苦挣扎太久了。

我想要做的只是简单地把下面的东西堆叠起来，就像一张有 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>
4

3 回答 3

2

这是您要完成的工作的简单演示。

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

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

header在您的代码中，您在and footer( )中缺少冒号width 1000px;，并且您没有定义widthof .content。

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

于 2012-10-17T00:48:37.543 回答
0

在网上窥探了一番之后，我设法得到了我需要的工作，包括一个粘页脚，所有 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>
于 2012-10-24T22:04:17.490 回答
0

尝试像这样声明您的利润：

margin:0 auto;

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

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

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

于 2012-10-17T00:57:43.677 回答