[英]if-statement body height < 100% javascript / jquery
In my site I have not set a height for a html or a body tag. 在我的网站上,我尚未设置html或body标签的高度。 This works great on pages with lots of content, but when the content on a page is not enough to fill the page up, I want the body height to be 100%.
这在包含大量内容的页面上效果很好,但是当页面上的内容不足以填满页面时,我希望正文高度为100%。
So I thought a bit of jQuery might help me out. 因此,我认为使用jQuery可能会对我有所帮助。 I've come up with this little snippet which I thought would be adequate but unfortunately it doesn't do all too much.
我已经提出了这个小片段,我认为这足够了,但是不幸的是,它并不能解决所有问题。
if(jQuery("html").css("height") < "100%"){
jQuery("html, body").css({"height": "100%", "min-height":"100%"});
}
I'm guessing that this may be because the jQuery may not picking up the body height as a percentage, maybe just in pixels. 我猜想这可能是因为jQuery可能不会以百分比的形式显示主体高度,可能只是以像素为单位。
Would really appreciate your help. 非常感谢您的帮助。
You can do this with 100% height layout. 您可以使用100%高度的布局进行此操作。 Without any javascript.
没有任何JavaScript。
Check this: 检查一下:
http://peterned.home.xs4all.nl/examples/csslayout1.html (have used in my projects) http://peterned.home.xs4all.nl/examples/csslayout1.html (已在我的项目中使用)
http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/ http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/
Anyway, if you want to do this via jQuery: 无论如何,如果您想通过jQuery做到这一点:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
You can define if document
height less then window
then set documents height to body or your main <div id=container></div>
if you have such. 您可以定义
document
高度是否小于window
高度,然后将文件高度设置为主体,或者将主文件<div id=container></div>
设置为主体。
Apply below css to your body/html 将以下CSS应用于您的身体/ html
html, body { min-height:100%; html,正文{最低高度:100%; height:auto }
高度:自动}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.