通过 jquery 设置 div 高度而不考虑屏幕高度答案

【问题标题】：Setting div hight respective of screen height via jquery通过 jquery 设置 div 高度而不考虑屏幕高度
【发布时间】：2011-09-16 16:16:08
【问题描述】：

有人告诉我使用 JS 来解决我的问题：

我的问题是我有 2 个 div 内容和侧边栏，高度设置为 100%，下面有一个页脚。

我的问题是，在我的笔记本电脑上，我希望页面在没有滚动的情况下显示为整页 3，如果有更多数据，则页面将需要滚动。

如何根据屏幕分辨率设置 div 高度？

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

您可以在纯 HTML/CSS 中执行此操作 - 无需 JavaScript。

你所追求的是一个跨浏览器粘性页脚。

以下源自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/

将右侧“结果”窗格的大小调整为比文本更短/更高，以查看滚动条出现/消失。

根据CSS Sticky Footer how-to，您可以在main div 中插入正常的“列”布局。

【讨论】：

我试过这个，但即使我的身体有几行说一两行，我也会得到滚动条。避免滚动条的任何帮助
你最好问一个新问题。链接回此链接，还包括您的代码示例，以及您在哪个浏览器中看到滚动条。