Question

我想要实现的是

enter image description here

和

enter image description here

使用以下jQ函数根据文档高度动态调整div高度

$(window).load(function() {
    $('.sideBg').css({ 'height': ($(document).height())});
});

我错过了什么？

Answer 1

如果您只使用background上的body，会不会更好？这样，您甚至不需要其他元素或JavaScript。

body {
  background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
              url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0, 
              black radial-gradient(ellipse at center, #45484D 0%,black 100%);
  background-repeat: repeat-y;
}

不要忘记使用background: black url(/design/img/bg/000.png);作为页脚。

不要忘记你也应该有前缀版本

background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
                  url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0, 
                  black -webkit-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
                  url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0, 
                  black -moz-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
                  url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0, 
                  black -o-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);

之前主体样式中未加前缀的那个。

如果我通过开发者工具

进行这些更改，则适用于我

screenshot

关于兼容性：多个背景比渐变有更好的支持（multiple backgrounds are supported by IE9，而CSS gradients are not）。实际上，由于渐变，这在IE 9中不起作用。但是，您可以在没有渐变的IE9 中通过在 之前添加 所有前缀版本多个背景回退（不带渐变）来使其工作。

background: url(http://vefaestetik.az/design/img/bg/side_bg.png), black url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0;

Answer 2

您需要移除margin-top上的.wrapper <div>以修复要修补的顶部：

.wrapper {
    background: url("/design/img/wrapper-bg.png") no-repeat center top;
    margin-bottom: 0 !important;
    margin-left: auto;
    margin-right: auto;
    /*margin-top: 20px; remove this */
    padding-top: 120px;
    position: relative;
    width: 1020px;
}

然后对于底部我建议获得.wrapper <div>的高度：

$(function() {
  var wrapperHeight = $('.wrapper').height();
  $('.sideBg').css('height': +wrapperHeight+'px');
});

Answer 3

如果您面临不必要的padding，请始终使用reset.css文件。

从此处复制代码：http://meyerweb.com/eric/tools/css/reset/

奇怪的填充问题

3 个答案: