0

我的 CSS 代码有问题。我不希望我的网站中有任何 srcollbars，我希望页脚留在底部。我认为高度和位置值有问题，但我不明白。希望有人可以帮助我。

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: " // ";
    }
4

2 回答 2

1

只需更改您的.mainContentcss，如下所示：

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

工作箱

于 2013-03-09T13:10:17.830 回答
0

请在 CSS 文件中进行一些更改。删除 .mainContent 的所有 css 代码。我所做的更改放在 left:0 的页脚中，好像不放置它，然后页脚会在 IE(<=7) 浏览器中引起问题。

 .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;
}
于 2013-03-09T15:21:27.860 回答