Dom*_*Bal 21 html css jquery height
我有一个包装器,以y重复的背景图像为中心:
<body>
<div id="wrapper">
...some content
</div>
</body>
#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background-image: url(image.jpg) 250px 0px repeat-y;
}
问题:当窗口大小高于从其内容继承的包装器高度时,图像显然不会在y轴上一直重复到窗口底部.
我已经使用jQuery根据实际文档高度动态地将内联CSS样式应用于包装器(当DOM准备就绪并且在窗口调整大小事件时):
$(function(){
$('#wrapper').css({'height':($(document).height())+'px'});
$(window).resize(function(){
$('#wrapper').css({'height':($(document).height())+'px'});
});
});
这种方法的问题在于,每次将窗口高度扩展到大于先前调整大小的最大尺寸的大小时,文档高度会延伸到这个差异,如果您无限地调整窗口大小并且具有无限大,则基本上使得包装器DIV无限大垂直展示空间.
在典型的30英寸显示屏上,1600px高度,当用户打开窗口高度为1000px且包装器高度为800px的网站时,上面的jQuery将高度设置为1000px正确平铺背景图像.此时,一旦用户扩展了窗口大小为例如1400px,1400px是新文档大小"记住默认值",即使用户将其窗口调整回原始的1000px高度,也不会更新自身,向底部的滚动条高度添加400px.
如何解决这个问题？
更新:(窗口).高度似乎不起作用,因为窗口高度是视口高度.当您的视口小于内容并滚动它时,包装器始终保持视口的大小,并且不会延伸到当前视口位置的底部.
Dom*_*Bal 24
我在某人的回答的帮助下弄明白了.但他出于某种原因删除了它.
这是解决方案:
监听(窗口).resize事件并且仅在视口大于#truecontent的高度时应用内联CSS高度,否则保持完整
$(function(){
var windowH = $(window).height();
var wrapperH = $('#wrapper').height();
if(windowH > wrapperH) {
$('#wrapper').css({'height':($(window).height())+'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var wrapperH = $('#wrapper').height();
var differenceH = windowH - wrapperH;
var newH = wrapperH + differenceH;
var truecontentH = $('#truecontent').height();
if(windowH > truecontentH) {
$('#wrapper').css('height', (newH)+'px');
}
})
});
小智 24
最简单的方法是添加:
$('#ID').css("height", $(document).height());
在浏览器确定正确的页面高度之后.如果文档高度再次更改,请重新运行上述代码.
Jov*_*vic 11
你可以把它做成absolute零,top然后bottom是:
#fullHeightDiv {
position: absolute;
top: 0;
bottom: 0;
}
小智 6
我找到的最简单的方法是在css中的viewport-height.
div {height: 100vh;}
这将获取浏览器窗口的视口高度,并在调整大小时更新它.
| 归档时间： |
|
| 查看次数： |
118959 次 |
| 最近记录： |