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;
    }

CSS阻止滚动

3 个答案: