javascript - 奇怪的填充问题

Question

请看这个页面

我想要实现的是

和

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

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

我错过了什么？

Answer 1

background如果你只使用on会不会更好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%);

在正文样式中的无前缀之一之前。

如果我通过开发人员工具进行这些更改，对我有用

关于兼容性：多背景比渐变支持更好（IE9支持多背景，CSS渐变不支持）。实际上，由于渐变，这在 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/