HTML CSS剩余空间

时间:2010-09-07 16:10:13

标签: javascript jquery html css

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

只是要明确......

场景1:内容在页面中间结束,页脚将占用剩余的一半。没有必要的滚动条。

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

<body>
 <div id="content">
 <div id="footer">
</body>

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

7 个答案:

答案 0 :(得分:3)

您可以随时尝试使用jQuery检测浏览器窗口的高度,然后从中扣除内容高度,为页脚指定高度(以像素为单位)。

虽然在不同尺寸的显示器上会有所不同。

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

var browserHeight = $(window).height();

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

var contentHeight = $("#content").height();

然后可以像这样计算页脚高度:

var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);

总而言之,你有:

<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>

或类似的东西:)

安东尼

答案 1 :(得分:1)

我会做这样的事情:

$(function() {
    var windowHeight = $(window).height();
    if ($('body').height() < windowHeight) {
        $('#footer').height(windowHeight - $('#content').height());
    }
});

你可能需要根据填充/边距来调整它,但基本上它应该是这样的。

答案 2 :(得分:1)

你可以用CSS伪造它。例如:

<div id="footer-background"></div>
<div id="content"></div>
<div id="footer"></div>

CSS:

#footer-background {
  position:absolute;
  width: 100%; // or the width of your content depending on if its fixed width, etc
  height: 100%;
  z-index: -1;
  margin: 0 auto; // if you use a fixed width this will center it
  top: 0;
  background: #000;
}

#content, #footer {
  position: relative;
  width: 100%; // or fixed width
  margin: 0 auto; //if you use a fixed width this will center it
  background: #fff;
  clear: both;
}

#footer {
  background: #000;
}

这样做是设置一个空div,它包含与页脚相同的背景css,但实际上它填满了整个页面。 (高度和宽度)。内容具有白色背景,因此它将与页脚背景重叠,直至内容高度。然后您的页脚将根据您的页脚内容进行缩放,但从视觉角度来看,如果页脚不滚动,则页脚将显示占据页面的其余部分。

答案 3 :(得分:0)

为什么在使用CSS时可以使用JavaScript?

首先将边距设为0

*{margin: 0;}

确保页面以高度方式填充浏览器

html,body{height: 100%;}

创建内容以填充100%只需删除页脚的高度

#content{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -200px;
}

然后设置页脚的高度,确保它与#content

中的边距相同
#footer{height: 142px;}

乔布斯很好:)

答案 4 :(得分:0)

无需使用javascript!你只能使用css:

#footer {
position:absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index:-100;
/* height: 100%; you don't need this, but you can put it to be sure */

}

它的作用是将这一层放置在整个屏幕上(相对于屏幕而不是页面,所以在你滚动后也会有相同的位置)并将它放在另一层后面(z-index:-100) )

答案 5 :(得分:0)

简单的解决方案:

body {
min-height: 100%;
position: relative;
}

#footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}

将这些属性/规则添加到您的CSS中应该可以满足您的需求。如果有效,请告诉我。

答案 6 :(得分:0)

如果您确实使用脚本调整页脚大小,请务必在调整大小事件时调用相同的函数。

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>untitled</title>

<style>
#footer{border:blue solid thick; position:relative}
</style>

<script>
window.onload= window.onresize=function(){
    var b=document.documentElement.clientHeight, 
    f=document.getElementById('footer'),h=f.offsetTop,
    hx= Math.floor(.96*(b-h));

    f.style.height= hx+'px';
}
</script>

</head>
<body>

<h1>h1</h1>
<div>content</div>
<div id="footer">footer</div>
</body>
</html>