CSS布局问题

我的CSS代码有问题。我不想在我的网站上有任何srcollbars，我希望页脚留在底部。我认为身高和体位值有问题，但我不明白。希望有人能帮助我。CSS布局问题

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

来源

2013-03-09 user2151485

页脚问题从页脚中删除'position：absolute'。 – Rahul 2013-03-09 13:07:27

你介意发布你的CSS文件吗？我们需要他们弄清楚问题所在。 – wei2912 2013-03-09 13:08:24

只要改变你的.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; 
}

Working Bin

来源

2013-03-09 13:10:17

*技术上*，那肯定是一个'工作斌'？（但+1，因为它确实似乎工作=）） – 2013-03-09 13:28:14

@DavidThomas我刚刚更新我的帖子与jsfiddle（我希望这是你的意思在上面的评论） – 2013-03-09 13:32:22

这是;我对JS Bin毫无疑问，只是链接上的命名是全部的（甚至这意味着更多的是幽默而不是批评）。 – 2013-03-09 13:34:16

请在CSS文件中做一些更改。 删除.mainContent的所有CSS代码。我所做的更改是将左侧：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-09 15:21:27

回答

相关问题