Question

我将给出我的网页的基本结构......用彩色DIV供你参考......事情是我的页面溢出和滚动条不工作，即使我添加了溢出-y：滚动;在我的HTML CSS .....然后我添加了一个JQuery它仍然它不起作用我的页面的四分之一仍然隐藏在浏览器下....即使我最小化浏览器我滚动条不活跃。 ..请帮忙

我的HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/iestyle.css" />
        <title>user logon</title>
        <script>
            $(window).resize(function() {
if($(window).width() <= 1200)
    $("body").css("width","1200px");
else
$("body").css("width","100%");
});

        </script>
    </head>
    <body>
        <div class="header" id="header"></div>
<div class="container" id="container">

<div class="left" id="left"> </div>
<div class="center" id="center"></div>
<div class="right" id="right"></div>
</div>
    </body>
</html>

这是我的css

html{
    overflow-x: scroll;
    overflow-y: scroll;
}

#header {
    background-attachment: fixed;
    background-color: black;
    display: block;
    padding: 2px;
    height: 200px;
    width: 1323px;
    border: thin ridge #900;

    position: fixed;
    z-index: auto;
    top: auto;
    right: auto;
}
#left {
    background-attachment: fixed;
    background-color: #009;
    background-repeat: no-repeat;
    background-position: left bottom;
    border: medium groove #033;

    position: fixed;
    height: 440px;
    width: 300px;
    left: 170px;
    top: 220px;
}
#center{
    background-attachment: fixed;
    background-color: #39C;
    background-repeat: no-repeat;
    background-position: center bottom;
    border: medium groove #033;

    position: fixed;
    height: 440px;
    width: 300px;
    left: 490px;
    top: 220px;
}
#right {
    background-attachment: fixed;
    background-color: #63C;
    background-repeat: no-repeat;
    background-position: center bottom;
    border: medium groove #033;

    position: fixed;
    height: 440px;
    width: 300px;
    left: 810px;
    top: 220px;
}
#container {
    background-color: #6CF;
    background-repeat: no-repeat;
    background-position: left top;
    padding: 10px;
    height: 440px;
    width: 1310px;
    border: thin groove #F00;
    position: fixed;
    left: 9px;
    top: 214px;
}

任何人都可以帮我解决这个问题，我会要求它适用于所有浏览器，特别是IE 8+ ..提前感谢

Answer 1

固定位置与滚动条不兼容。使用position:absolute。

这是一个小提琴：http://jsfiddle.net/s593c/

这是固定CSS：

html{
    overflow-x: scroll;
    overflow-y: scroll;
}

#header {
    background-attachment: fixed;
    background-color: black;
    display: block;
    padding: 2px;
    height: 200px;
    width: 1323px;
    border: thin ridge #900;

    position: absolute;
    z-index: auto;
    top: auto;
    right: auto;
}
#left {
    background-attachment: fixed;
    background-color: #009;
    background-repeat: no-repeat;
    background-position: left bottom;
    border: medium groove #033;

    position: absolute;
    height: 440px;
    width: 300px;
    left: 170px;
    top: 220px;
}
#center{
    background-attachment: fixed;
    background-color: #39C;
    background-repeat: no-repeat;
    background-position: center bottom;
    border: medium groove #033;

    position: absolute;
    height: 440px;
    width: 300px;
    left: 490px;
    top: 220px;
}
#right {
    background-attachment: fixed;
    background-color: #63C;
    background-repeat: no-repeat;
    background-position: center bottom;
    border: medium groove #033;

    position: absolute;
    height: 440px;
    width: 300px;
    left: 810px;
    top: 220px;
}
#container {
    background-color: #6CF;
    background-repeat: no-repeat;
    background-position: left top;
    padding: 10px;
    height: 440px;
    width: 1310px;
    border: thin groove #F00;
    position: absolute;
    left: 9px;
    top: 214px;
}

虽然我的页面在浏览器中溢出但滚动条不起作用

1 个答案: