Html CSS布局问题

我的CSS代码有问题。我不希望我的webiste中有任何srcollbar，我希望页脚保持在底部。我认为高度和位置值有问题，但我不明白。希望有人能帮我

HTML

<div class="content">


  <nav>
    <ul class"nav">
      <li><a href="photo.html">Photo</a></li>
      <li><a href="video.html">Video</a></li>
      <li><a href="gear.html">Gear</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

  <div class="mainContent">
    <article class="article">
     <h3>News</h3>
      <p>This site is currently under construction. Please revisit soon.</p>
    </article>
  tsdfsdfsdfsdfsdfsdf</div>

  <footer>
  © <a href="index.html">MAREYUS PICTURES</a> - all rights reserved </footer>

</div>

---

只需更改

.mainContent

css，如下所示：

.mainContent{
    position: absolute;  /*replace with relative */
    top: 45px; /* height :15px; margin-top: 10px; padding:10px; (15 + 10 + 20) of the "nav" */
    bottom: 0; /* give the value equal to the height of the "footer" */
    left: 0;
    right: 0;
    background-color: rgba(0,102,204,1);
    overflow: hidden;
}

---

请对CSS文件进行一些更改。删除.mainContent的所有CSS代码。我所做的更改是将左：0放置在页脚中，好像没有放置此位置，那么页脚将导致IE出现问题（对于页脚问题，请从页脚删除

位置：绝对

。您介意发布您的CSS文件吗？我们需要他们来解决这个问题。从技术上讲，这肯定是一个“工作垃圾桶”（但+1，因为它似乎确实有效=）@DavidThomas我刚刚用JSFIDLE更新了我的帖子（我希望这就是你在上面评论中的意思），它是；作为JS Bin，我毫不犹豫，只是链接上的命名就足够了（甚至这意味着更多的是幽默，而不是批评）。@DavidThomas ha。。我以前不懂你的幽默：）（现在我明白了）。我回滚，因为它在bin中看起来不错。@user2151485如果我的帖子解决了您的问题，请将其标记为答案。

.mainContent{
    position: absolute;  /*replace with relative */
    top: 45px; /* height :15px; margin-top: 10px; padding:10px; (15 + 10 + 20) of the "nav" */
    bottom: 0; /* give the value equal to the height of the "footer" */
    left: 0;
    right: 0;
    background-color: rgba(0,102,204,1);
    overflow: hidden;
}

 .content{
    position:relative;
    min-height:100%;
    width:100%;
    margin:0;
    padding:0;
float:left;
width:100%;
background-color: rgba(0,102,204,1);
}



 nav{
    background-color:#000;
    height:15px;
    padding:10px;
    color:#FFF;
}
 footer{
    position:absolute;
    bottom:0;
    width:100%;
left:0;
    background-color:rgba(255,255,255,1);
    text-align:center;
}