溢出的问题

Question

我正在一个HTML/CSS网站上，主要是4个div（包装，顶部，菜单和内容），使用居中布局。

问题是，我的＃内容中的文本重叠，我不能强迫它在div内。另外，当我启用div上的滚动并在HTML上禁用它时，滚动只会对div无效。因此，我遇到了重叠的内容，无法向下滚动。

所以，恢复它，我想使用3固定的div，居中，留下两个边框，并希望我的背景图像不移动。只有内容应该在内部滚动。

这里是我的CSS代码：

<style type=text/css> 

html 
{ 
    overflow: none; 
} 

head 
{ 

} 

body 
{ 
    background-color: #030B12; 
} 

p 
{ 
    font-family: verdana; 
    font-size: 12px; 
    color: #FFFFFF; 
    text-align: left; 
} 

h1 
{ 
    margin-top: 25px; 
    font-family: verdana; 
    font-size: 16px; 
    color: #FFFFFF; 
    text-align: center; 
} 

bg2 
{ 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

#wrapper 
{ 
    height: 100%; 
    width: 70%; 
    margin: auto; 
    background-image: url('bg2.jpg'); 
    background-position: fixed; 
    background-repeat: no-repeat; 
} 

#top 
{ 
    background-image:url('top.jpg'); 
    background-repeat: no-repeat; 
    background-position: fixed; 
    height: 15%; 
    width: 100%; 
    margin: auto; 
} 

#menu 
{ 
    height: 60px; 
    width: 100%; 
    background-image: url('navi_bg.png'); 
} 

#content 
{ 
    overflow: auto; 
    display: block; 
} 

ul 
{ 
    list-style-type: none; 
    height: 60px; 
    width: 663px; 
    margin: auto; 
} 

ul a 
{ 
    background-image: url(navi_bg_divider.png); 
    background-repeat: no-repeat; 
    background-position: right; 
    padding-right: 22px; 
    padding-left: 16px; 
    display: block; 
    line-height: 60px; 
    text-decoration: none; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 21px; 
    color: #FFFFFF; 
} 

ul li 
{ 
    list-style-type: none; 
    float: left; 

} 

ul a:hover 
{ 
    color: #3F5F7B; 
} 

Answer 1

基于什么是可用的，我创建了一个布局，我认为是你在找什么。获得顶级菜单项目时有一些问题，但我相信你可以很容易地解决这个问题。如果您只想滚动该区域，则应指定内容区域的高度，并使包装的背景保持静态。

div#content{ 
max-height:300px; 
overflow-y:scroll; 
} 

Here is the fiddle