在 Chrome 中调整大小时 CSS 侧边栏消失答案

【问题标题】：CSS sidebar vanishes on resize in Chrome在 Chrome 中调整大小时 CSS 侧边栏消失
【发布时间】：2014-01-03 10:37:23
【问题描述】：

我想用背景图片突出显示侧边栏。背景应该从窗口的顶部延伸到底部。

当浏览器窗口调整大小并且侧边栏变宽/变窄时，背景应该适应那个大小。

这是一个示例：

<html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('body').css({
                "background": "url('images/sidebar_bg.png') repeat-y",
                "background-size": $('#sidebar').outerWidth() + "px"
            });

            $(window).resize(function() {
                $('body').css({
                    "background-size" : $('#sidebar').outerWidth() + "px"
                });
            });
        });
    </script>
    <style type="text/css">
        html, body {
            width: 100%;
        }
        #sidebar {
            width: 20%;
            float: left;
        }
        #content {
            width: 80%;
            float: left;
        }
    </style>
    </head>
    <body>
        <div id="sidebar">Sidebar content</div>
        <div id="content">Lorem ipsum dolor</div>
    </body>
</html>

这在 Firefox 和 IE 中都可以正常工作，但在 Chrome 中，侧边栏会在调整大小时消失。

【问题讨论】：

在这里工作如您所愿jsfiddle.net/surjithctly/LtYyE

标签： jquery css css-float sidebar window-resize

【解决方案1】：

您实际上并不需要任何 jquery。只需为侧边栏本身使用背景 css。像这样：

#sidebar {
 width:20%;
 float:left;
 background: url(images/sidebar.png) no-repeat;
 background-size: 100% 100%;
}

这将在侧边栏中展开您的图像

【讨论】：

谢谢，但这只会在侧边栏中传播背景图像。我需要它从窗口的顶部到底部。
那么你应该将这些css规则分配给body，但是像你的例子一样通过js控制它们，但是改变：“background-size”：$('#sidebar').outerWidth() + "px 100%" 它适用于我，也适用于 Chrome。
第二个背景尺寸参数产生了影响。谢谢！