Javascript HTML CSS剩余空间_Javascript_Jquery_Html_Css

Javascript HTML CSS剩余空间

javascript jquery html css

Javascript HTML CSS剩余空间,javascript,jquery,html,css,Javascript,Jquery,Html,Css,如何让页脚占据页面垂直空间的剩余部分，而不知道内容有多高？我不知道如何使用javascript/css来实现这一点我只是想说清楚场景1：内容在页面中间结束，页脚将占据剩余的一半。不需要滚动条 <body> <div id="content"> <div id="footer"> </body> 场景2：内容占1 1/2页，页脚只占它需要的部分（~200px）。滚动条是必需的 <body> <div id="conten

如何让页脚占据页面垂直空间的剩余部分，而不知道内容有多高？我不知道如何使用javascript/css来实现这一点

我只是想说清楚

场景1：内容在页面中间结束，页脚将占据剩余的一半。不需要滚动条

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

场景2：内容占1 1/2页，页脚只占它需要的部分（~200px）。滚动条是必需的

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

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

我会这样做：

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

$（函数（）{
var windowHeight=$（window.height（）；
if（$（'body'）.height（）


您可能需要根据填充/边距进行调整，但这基本上就是它的工作方式。
您可以尝试使用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>


$（文档）.ready（函数（）{
//获取浏览器和内容高度
var browserHeight=$（窗口）.height（）；
var contentHeight=$（“#content”）.height（）；
//设置页脚高度
var footerHeight=浏览器高度-内容高度；
$（“#页脚”）。高度（页脚高度）；
});

或者类似的：）
Anthony
既然可以用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;}

一个很好的作业：）
无需使用javascript！您只能为此使用css：

#页脚{

位置：绝对；

顶部：0；

左：0；

右：0；

底部：0；

z指数：-100；

/*身高：100%；你不需要这个，但你可以确定*/
}

它所做的是将该层定位在整个屏幕上（相对于屏幕-而不是页面，因此在您滚动后它也将具有相同的位置），并将其放置在另一层的后面（z-index:-100）
您可以用CSS“伪造”它。例如：
<div id="footer-background"></div>
<div id="content"></div>
<div id="footer"></div>

这样做的目的是设置一个空div，其中包含与页脚相同的背景css，但它实际上填充了整个页面。（高度和宽度）。内容具有白色背景，因此它将与页脚背景重叠，直到内容高度为止。然后，页脚将根据页脚内容进行缩放，但从视觉角度看，如果页脚不滚动，页脚将占据页面的其余部分。
简单解决方案：
body {
min-height: 100%;
position: relative;
}

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

将这些属性/规则添加到css中应该可以满足您的需要。让我知道它是否有效。
如果确实使用脚本调整页脚大小，请确保在调整事件大小时调用相同的函数
<!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>


无标题
#页脚{边框：蓝色实心厚；位置：相对}
window.onload=window.onresize=function（）{
var b=document.documentElement.clientHeight，
f=document.getElementById（'footer'），h=f.offsetTop，
hx=数学楼层（.96*（b-h））；
f、 样式.高度=hx+'px'；
}
h1
内容
页脚
这会去哪里？在任何javascript文件中？我混合使用这两种答案使其工作，Elquive有正确的想法，除了没有$（文档）它无法工作。就绪部分。。。另外，您在}末尾缺少一个括号
应该是}）由于某种原因，它无法工作$（文件）。准备工作没有在正确的时间启动。。。我可以打开一个JS控制台并执行JS命令，它可以工作，但是如果我把它放在页面中，它就不会。。。我不知道为什么。您是否确保将jQuery库调用到页面中？是的，不知怎么的，我解决了这个问题，但是在通过css更改页边距和填充时出现了其他问题。。。如果我将主体边距（上、左、右、下）设置为0，则它不起作用。如果我把底部去掉，下面就会有一个空白。如果我将其设置为1，则底部有1px的边距，等等。奇怪的副作用。@myermian，您将不得不添加更多javascript以从div的高度扣除填充和许多边距。这听起来可能很疯狂，但实际上我需要页脚在z索引的顶部。。。它有一个半透明的背景色，所以页面背景会稍微透出来。我不明白：你需要它放在内容上面吗？如果您需要页脚正好位于其他背景之上，您仍然可以使用页脚：z-index:100，但要使内容：z-index:101；z指数：101？？为什么101，它不需要z索引，因为元素已经在顶部，它是body的父元素，而不是body中任何其他元素的父元素！好的，尝试是让它不被锁定到位，所以这不是当前问题的解决方案。不，页脚高度必须调整到页面的剩余部分，而不是静态的142px。