请查看at this page
我想要实现的是
和
使用以下jQ函数根据文档高度动态调整div高度
$(window).load(function() {
$('.sideBg').css({ 'height': ($(document).height())});
});
我错过了什么?
答案 0 :(得分:0)
如果您只使用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%);
之前 主体样式中未加前缀的那个。
如果我通过开发者工具
进行这些更改,则适用于我
关于兼容性:多个背景比渐变有更好的支持(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;
答案 1 :(得分:0)
您需要移除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');
});
答案 2 :(得分:0)
如果您面临不必要的padding
,请始终使用reset.css文件。