Question

我被告知使用JS来解决我的问题：

我的问题是我有2个div内容和侧边栏，高度设置为100％，我的页脚位于下方。

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

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

Answer 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中插入普通的“列”布局。

通过jquery设置div高度，与屏幕高度无关

1 个答案:

通过jquery设置di​​v高度，与屏幕高度无关

1 个答案:

通过jquery设置div高度，与屏幕高度无关