CSS防止滚动

Question

我正在为一个朋友工作，该工程涉及为他的房地产公司制作一个网站。该页面全部完成，其上的内容......并且有足够的内容，我不得不向下滚动以阅读整个页面。

当我将外部CSS样式表的链接添加到页眉时，该页面获得了我想要的外观，但出于某种原因，滚动条消失（Chrome和Safari，Mac 10.8），而且我无法向下滚动阅读底部的内容。删除链接到CSS会带回滚动条，但显然页面会丢失所有样式。

我已经附加了样式表的副本，如果有人看到的东西，可能导致此，帮助将不胜感激。

#wrapper { 
    width: 1024px; 
    margin: 0 auto; 
} 

body { 
    background: #E4BD82 url("../img/bg.gif") repeat; 
    font: normal 12px/150% "Verdana", "Arial", "Helvetica", sans-serif; 
     color: #4b2b16; 
} 

body .text 
{ 
    font: normal 12px/150% "Verdana", "Arial", "Helvetica", sans-serif; 
} 

#header { 
    margin-left:auto; 
    margin-right:auto; 
    top: 0px; 
    width: 1024px; 
    height: 150px; 
    position:relative; 
    background: url("../img/header.gif") bottom left no-repeat; 
} 

#menu { 
    height: 42px; 
    list-style: none; 
    position: absolute; 
    bottom: 5px; 
    left: 90px; 
} 

#menu li { 
    float: left; 
    height: 42px; 
    line-height: 42px; 
    padding: 13px 20px; 
    color: #D89915; 
    font: bold 12px "Verdana", "Arial", "Helvetica", sans-serif; 
    text-decoration: none; 
} 

#menu li a { 
    padding: 13px 20px; 
    color: #D89915; 
    font: bold 12px "Verdana", "Arial", "Helvetica", sans-serif; 
    text-decoration: none; 
} 

#menu li a:hover { 
    background-color: #4D3406; 
    color: #EAF6AD; 
} 

#sidebar { 
    position:fixed; 
    top: 151px; height: 100%; width: 290px; 
    background: url("../img/sidebar.gif") top left repeat-y; 
} 

#main { 
    width: 734px; 
    margin-left: 300px; 
    min-height: 1000px; 
     position: fixed; 
} 



div, img, form, fieldset, ul, li, h1, h2, h3, h6, p { 
    margin: 0; 
    padding: 5; 
    border: 0; 
} 

a.photo:link { 
    font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif; 
    text-decoration: none; 
    color: #4b2b16; 
} 

a.photo:visited { 
    font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif; 
    text-decoration: none; 
    color: #4b2b16; 
} 

a.photo:hover { 
    font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif; 
    text-decoration: underline; 
    color: #4b2b16; 
} 

a.photo:active { 
    font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif; 
    text-decoration: none; 
    color: #4b2b16; 
} 

.copyright { 
    font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif; 
    text-decoration: none; 
    text-align: center; 
} 

img.display { 
    margin-left: 150px; 
    padding: 1px; 
    border: 5px outset; 
    border-color: #EE7621; 
} 

Answer 1

在没有看到HTML，我首先想到的是一些overflow: hidden，但后来我发现这一点：

#main { 
    width: 734px; 
    margin-left: 300px; 
    min-height: 1000px; 
     position: fixed; 
} 

的position: fixed可能是问题这里。去掉它。

Answer 2

尝试删除position:fixed;从#main：

#main { 
    width: 734px; 
    margin-left: 300px; 
    min-height: 1000px; 
    //position: fixed; 
} 

Answer 3

您需要更改#main位置的财产，你正在使用position:fixed，将其更改为position:scroll。也不要重复的CSS属性，而不是这样做：

#wrapper { 
     width: 1024px; 
     margin: 0 auto; 
    } 

    body { 
     background: #E4BD82 url("../img/bg.gif") repeat; 
     font: normal 12px/150% "Verdana", "Arial", "Helvetica", sans-serif; 
     color: #4b2b16; 
    } 

    #header { 
     margin:0 auto; 
     top: 0px; 
     width: 1024px; 
     height: 150px; 
     position:relative; 
     background: url("../img/header.gif") bottom left no-repeat; 
    } 

    #menu ul { 
     height: 42px; 
     list-style: none; 
     bottom: 5px; 
     left: 90px; 
    } 

    #menu ul li { 
     float: left; 
     height: 42px; 
     line-height: 42px; 
     padding: 13px 20px; 
     font-weight: bold; 
    } 

    #menu ul li a { 
     color: #D89915; 
     display: block; 
     text-decoration: none; 
    } 

    #menu ul li a:hover { 
     background-color: #4D3406; 
     color: #EAF6AD; 
    } 

    #sidebar { 
     position:fixed; 
     top: 151px; height: 100%; width: 290px; 
     background: url("../img/sidebar.gif") top left repeat-y; 
    } 

    #main { 
     max-width: 734px; 
     margin-left: 300px; 
     position: scroll; 
    } 



    div, img, form, fieldset, ul, li, h1, h2, h3, h6, p { 
     margin: 0; 
     padding: 5; 
     border: 0; 
    } 
    a.photo, a.photo:visited{ 
      font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif; 
     text-decoration: none; 
     color: #4b2b16; 
    } 

    a.photo:hover { 
     text-decoration: underline; 
    } 

    .copyright { 
     text-align: center; 
    } 

    img.display { 
     margin-left: 150px; 
     padding: 1px; 
     border: 5px outset; 
     border-color: #EE7621; 
    }