HTML CSS剩余空间

m-y*_*m-y 8 html javascript css jquery

如何在不知道内容有多高的情况下让页脚占据页面垂直空间的其余部分?我无法弄清楚如何使用javascript/css来完成这个...

要清楚......

场景1:内容在页面中间结束,页脚将占用剩余的一半.不需要滚动条.

场景2:内容占用1 1/2页,页脚只占用它需要的内容(~200px).需要滚动条.

<body>
 <div id="content">
 <div id="footer">
</body>
Run Code Online (Sandbox Code Playgroud)

哦,我愿意采用jQuery的方式来做这件事.

Ant*_*Ali 3

您始终可以尝试使用 jQuery 来检测浏览器窗口的高度,然后从中扣除内容高度,以将高度(以像素为单位)分配给页脚。

尽管在不同尺寸的显示器上会有所不同。

要获取浏览器高度并将其存储为变量,您可以使用:

var browserHeight = $(window).height();
Run Code Online (Sandbox Code Playgroud)

内容高度可以使用以下方式存储:

var contentHeight = $("#content").height();
Run Code Online (Sandbox Code Playgroud)

页脚高度可以这样计算:

var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
Run Code Online (Sandbox Code Playgroud)

总的来说,你会:

<script type="text/javascript">
        $(document).ready(function(){
             //Get Browser and Content Heights
             var browserHeight = $(window).height();
             var contentHeight = $("#content").height();
             //Set footer height
             var footerHeight = browserHeight - contentHeight;            
             $("#footer").height(footerHeight);
        });
</script>
Run Code Online (Sandbox Code Playgroud)

或类似的东西 :)

安东尼