CSS布局问题

Question

I have a problem with my CSS Code. I don't want any srcollbars in my webiste and I want the footer to stay at the bottom. I think there is something wrong with the height and position values, but I don't get it. Hope somebody could help me out.

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>

CSS

    html{
        height:100%;
        padding:0;
        margin:0;
        /* overflow-x: hidden;
        overflow-y: hidden; */
        background: url(../images/Distortion_Symmetry_Object.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    body{
        height:100%;
        padding:0;
        margin:0;
    }

    .content{
        position:absolute;
        height:100%;
        width:100%;
        margin:0;
        padding:0;
    }

    nav{
        background-color:#000;
        margin-top:10px;
        height:15px;
        padding:10px;
        color:#FFF;
    }

    .mainContent{
        position: relative;
        height:100%;
        background-color:rgba(0,102,204,1);
        overflow:hidden;
    }

    .article{
        position:absolute;
        right:0;
        bottom:0;
        width:150px;
        height:350px;
        background:#333;
        color:#FFF;
        padding:10px;
        text-align:center;
    }

    footer{
        position:absolute;
        bottom:0;
        width:100%;
        background-color:rgba(255,255,255,1);
        text-align:center;
    }



    nav a:active, nav a:hover, nav a:focus nav a:visited{
        color: #E58459;
    }

    ul{
        list-style-type: none;
        margin: auto;
        margin-right:50px;
    }

    ul a{
        padding-right: 32px;
        padding-left: 32px;
        text-decoration: none;
        color:#FFF;
    }

    li{
        float:right;
    }

    li:nth-child(n+1):before {
        content: " // ";
    }

Answer 1

Just change your .mainContent css as shown below:

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

Working Bin

Answer 2

please do some changes in the CSS file. Remove all css code of .mainContent .The changes which i have done are place left:0 in footer as if don't place this then footer would cause problem in IE(<=7) browsers.

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