Html 调整大小时防止两列重叠_Html_Css

Html 调整大小时防止两列重叠

html css

Html 调整大小时防止两列重叠,html,css,Html,Css,我是CSS新手，一直在尝试建立一个两栏的网站。代码在这里：。有一个左侧菜单和右侧内容区。如果窗口足够大，则布局没有问题。但是，当将窗口调整为窄窗口时，内容会溢出到菜单区域，我不知道如何在不使位置固定或绝对的情况下修复它，我不想这样做，因为我想在页面末尾有一个页脚。有人能帮我解决这个问题吗？非常感谢你我也为冗长的代码提前道歉。我不知道问题出在哪一部分，把所有的东西都贴上了 html代码： <body> <div id="wrapper"> <div id="menu

我是CSS新手，一直在尝试建立一个两栏的网站。代码在这里：。有一个左侧菜单和右侧内容区。如果窗口足够大，则布局没有问题。但是，当将窗口调整为窄窗口时，内容会溢出到菜单区域，我不知道如何在不使位置固定或绝对的情况下修复它，我不想这样做，因为我想在页面末尾有一个页脚。有人能帮我解决这个问题吗？非常感谢你

我也为冗长的代码提前道歉。我不知道问题出在哪一部分，把所有的东西都贴上了 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>

设置

z-index:1

和设置

背景色：#FFFFFF在#Menuna
它在这里工作
 位置：静态哦。。。抢手货它可能来自该文件的早期版本。那么您的目标是什么？您希望左栏在滚动时是静态的还是只希望列不重叠？我希望左栏在内容可以上下滚动时不移动。当窗户足够大时，情况似乎就是这样。但是当内容区域缩小时，它会表现得很怪异。你不能两全其美。如果左边的列是静态的，它将始终与右边的列重叠，这不是一件坏事，你只需要让它正常工作即可，即嗨，Sam1604，谢谢你的回复。然而，它并不能解决当窗口变小时内容水平滚动的问题。有没有办法让它不水平滚动？
@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;
}
}

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