Question

我是CSS的新手，并且一直在尝试构建一个2列的网站。代码在这里：JSFiddle。左侧菜单包含右侧内容区域。如果窗口足够大，则布局没有问题。但是，当将窗口调整为较窄的窗口时，内容溢出到菜单区域，我不知道如何修复它而不使位置固定或绝对，我不想做，因为我想有一个页面末尾的页脚。有人可以帮我解决问题吗？非常感谢你！

我也提前为长码道歉。我不知道哪个部分存在问题并粘贴了所有内容 HTML代码：

<body>
<div id="wrapper">
<div id="menunav">
    <img src="images/logo.jpg" alt="siteLogo" class="centered" id="logo"/>
<nav id="nav">
  <ul>
    <li><a href="index.html" class="thispage">Portfolio</a></li>
    <li><a href="aboutme.html">About Me</a></li>
    <li><a href="#">Resume</a></li>
  </ul>
</nav>
</div>

<div id="content">
<div class="grid3">
 <article class="bucket" >
 <a href="#">
 <img src="images/baskerville1.jpg" alt=""/>
 <div class = "img-overlay">
   <h3>Monogram</h3></div>
   </a>
 </article>

<article class="bucket">
<a href="#">
<img src="images/Gastalt.png" alt=""/> 
<div class="img-overlay">
    <h3>Gastalt Composition</h3>
  </div>
</a>
</article>

<article class="bucket">
<a href="#">
<img src="images/redThread.png" alt=""/> 
<div class="img-overlay">
    <h3>The Red Thread - A Visual Book</h3>
  </div>
  </a>
</article>

<article class="bucket">
<a href="#">
<img src="images/poster copy.png" alt=""/> 
<div class="img-overlay">
    <h3>Typographic Hierarchy</h3>
  </div>
  </a>
</article>

<article class="bucket">
<a href="#">
<img src="images/Spaces.png" alt=""/> 
<div class="img-overlay">
    <h3>Living in Two Spaces</h3>
  </div>
  </a>
</article>  
</div>
</div>
<div id="footer">&copy;2014</div>
</div>  

</body>

css代码：

@charset "UTF-8";

*{
margin:0;
}

html, body {
margin: 0;
background-color: #FFFFFF;
height: 100%;
padding: 0;
}

#wrapper {
background-color: #FFFFFF;
width: 1000px;
padding-bottom: 0px;
margin:0 auto;
position:relative;
min-height: 100%;
}

#menunav {
position: fixed;
width:180px;
padding-top:80px;
height: 100%;
display: block;
margin: 0px;
}
#logo {
width: 70%;
position: static;
}
#menunav ul {
list-style-type: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#menunav a {
display: block;
padding-top: 8px;
padding-bottom: 8px;
margin-top: 12px;
margin-right: 0px;
margin-left: 0px;
text-align: left;
padding-left: 20px;
background-color: rgba(193,193,193,1.00);
color: rgba(0,0,0,1.00);
}
#menunav a:hover, #menunav a:active, #mainnav a:focus, #menunav a.thispage {
background-color: rgba(0,174,210,1.00);
color: rgba(255,255,255,1.00);
text-decoration: none;
}

#content {
display: block;
    margin: 0 auto;
padding-left:225px;
padding-top:80px;
background-color:#fffeee;
}

.centered {
margin-left: auto;
margin-right: auto;
display: block;
margin-top: auto;
margin-bottom: auto;
}

a {
text-decoration: none;
}
.bucket {
position:relative;
float: left;
margin-left: 3.2%;
margin-bottom:30px;
}

.grid3 .bucket:nth-of-type(3n+1){
margin-left: 0;
clear: left;
}

 .grid3 .bucket{
width: 31.2%;
}

.img-overlay h3 {
opacity: 1;
display: inline-block;
margin: auto;
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
color: rgba(255,254,254,1.00);
text-align: center;
vertical-align: middle;
 }
 .img-overlay {
background-color: rgba(0,0,0,0.6);
bottom: 0px;
top: 0px;
opacity: 0;
overflow:hidden;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
}
.bucket:hover .img-overlay {
opacity:1;
filter: alpha(opacity=100);
}

.bucket img {
width: 100%;
}

#footer{
clear:both;
text-align: center;
line-height:20px;
vertical-align: middle;
}


@media screen and (max-width:740px){
/*change 3 column to 2 column*/
.grid3 .bucket:nth-of-type(3n+1) {
    margin-left: 3.2%;
    clear: none;
}
.grid3 .bucket:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
}
}

Answer 1

设置z-index:1并在#menunav

中设置background-color: #FFFFFF;

#menunav {
z-index: 1;
background-color: #FFFFFF;
position: fixed;
width:180px;
padding-top:80px;
height: 100%;
display: block;
margin: 0px;
}

这是http://jsfiddle.net/n9V3W/2/工作!!!

调整大小时停止两列重叠

1 个答案: