1

我正在为一个朋友做一个项目，其中包括为他的房地产公司制作一个网站。页面全部完成，上面有内容.. 有足够的内容我必须向下滚动才能阅读整个页面。

当我将外部 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;
}
4

3 回答 3

4

没有看到 HTML，我的第一个想法是一些overflow: hidden，但后来我注意到了这一点：

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

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

于 2013-04-11T15:42:24.070 回答
3

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

#main {
  width: 734px;
  margin-left: 300px;
  min-height: 1000px;
  //position: fixed;
}
于 2013-04-11T15:42:11.630 回答
2

您需要更改#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;
    }
于 2013-04-11T16:03:46.060 回答