通过jQuery设置div hight相应的屏幕高度 [英] Setting div hight respective of screen height via jquery
问题描述
有人告诉我使用JS解决我的问题:
I have been told to use JS to resolve my issue:
我的问题是我有2个divs内容和侧边栏，高度设置为100％，下面有一个页脚.
My issue is that I have 2 divs content and sidebar with the height set to 100%, I have a footer located underneath.
我的问题是我希望在笔记本电脑上不滚动显示页面，而在整页显示3，如果有更多数据，则页面需要滚动显示.
My issue is that on my laptop I would like the page to show without a scroll and on a full page3, if there is more data the page will then require a scroll.
如何将确定的div高度设置为屏幕分辨率?
How could I set the div height determined to my screen resolution?
推荐答案
您可以使用纯HTML/CSS进行此操作-无需JavaScript.
You can do this in pure HTML/CSS - no JavaScript required.
您需要的是跨浏览器的粘性页脚.
What you're after is a cross-browser sticky footer.
以下内容源自 http://www.cssstickyfooter.com/:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<!-- Main content here -->
</div>
</div>
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
</html>
您可以在此处看到一个有效的示例: http://jsfiddle.net/dZDUR/
You can see a working example here: http://jsfiddle.net/dZDUR/
将右侧结果"窗格的大小调整为比文本更短/更短，以查看滚动条的出现/消失.
Resize the right-hand "Result" pane to be shorter/taller than the text to see the scroll bar appear / disappear.
按照 CSS粘性页脚操作方法，您可以在main div内插入常规的列"布局.
As per the CSS Sticky Footer how-to, you can insert your normal 'column' layout inside the main div.
这篇关于通过jQuery设置div hight相应的屏幕高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
