0

我正在使用 Twitter Bootstrap 2.2.2。我有一个固定高度的容器（基于用户窗口高度）并为其激活了滚动条。

问题来自容器的图像背景：即使我已将其设置为滚动，它仍处于固定状态。

这是我的CSS：

html {
    width:100%;
    height:100%;
    overflow:hidden;
}
#tb1 {
    width:100%;
    height:40px;
    background-color:blue;
}
#tb2 {
    width:100%;
    height:30px;
    background-color:red;
}
#container {
    /*overflow-y:hidden;
    height:400px;*/
    background:url(http://placehold.it/350x150) no-repeat scroll transparent;
    position:absolute;
    top:70px;
    left:0;
    right:0;
    bottom:0;
}
#row1 {
    padding:10px;
    overflow-y:scroll;
    max-height:100%;
}

HTML：

<html>

    <head>
        <link rel="stylesheet" media="screen" href="//cdn.a973c.com/scripts/bootstrap/2.2.2/bootstrap-2.2.2.css">
        <link rel="stylesheet" media="screen" href="//cdn.a973c.com/scripts/bootstrap/2.2.2/bootstrap-responsive-2.2.2.css">
    </head>

    <body>
        <div id="tb1">tb1</div>
        <div id="tb2">tb2</div>
        <div id="container" class="container-fluid">
            <div class="row-fluid" id="row1" style="height:1500px;">
                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

            </div>
        </div>
    </body>

</html>

还有一个jsFiffle

我的代码有什么问题？

谢谢你的帮助！

编辑：当我为#row1 取消设置高度时，我的背景正在正确滚动......

4

2 回答 2

0

错误代码是：

 background:url(http://placehold.it/350x150) no-repeat scroll transparent;//No .png provied

您的 css 中未提供文件的扩展名。它应该像下面

正确的代码

background:url(http://placehold.it/350x150.png) repeat scroll transparent;

正如我所看到的，我刚刚尝试使用.png它可以工作的扩展名，您需要通过扩展名指定哪种类型的文件

这是小提琴

于 2013-02-07T07:43:34.980 回答
0

添加“背景附件：本地”应该可以解决您的问题：

#container {
    overflow-y:auto;
    height:400px;
    background:url(http://placehold.it/350x150) no-repeat transparent;
    background-attachment: local;
    top:70px;
    left:0;
    right:0;
    bottom:0;
}
#row1 {
    padding:10px;
    max-height:100%;
}
于 2018-03-12T15:51:20.920 回答