HTML CSS 剩余空间

Question

HTML CSS 剩余空间

javascriptjqueryhtmlcss

8

如何使页脚占据页面垂直空间的其余部分，而不需要知道内容的高度？我无法想出如何使用javascript/css来实现这一点...

仅仅为了明确...

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

场景2：内容占据了1.5页，页脚将只占用所需的空间（约200px）。需要滚动条。

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

哦，我也可以采用jQuery的方式来实现。

- myermian

7个回答

1

我会这样做：

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

你可能需要根据填充/边距进行调整，但基本上应该是这样工作的。

- jwueller

这个应该放在哪里？放在任何 JavaScript 文件中都可以吗？ - myermian

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，但实际上填充整个页面（高度和宽度）。内容具有白色背景，因此它将重叠页脚背景，直到内容高度。然后，您的页脚将根据页脚内容进行缩放，但从视觉角度来看，如果不滚动，页脚将占据页面的其余部分。

- Mark

0

为什么要使用JavaScript，这不可以用CSS完成吗？

首先将边距设置为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;}

工作不错 :)

- RobertPitt

不行，页脚高度必须根据页面剩余部分进行调整，而不是静态的142像素。 - myermian

0

简单的解决方案：

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

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

将这些属性/规则添加到您的CSS中应该可以实现您想要的效果。如果有效，请告诉我。

- Jo Sprague

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>

- kennebec

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

- cripox

这可能听起来很疯狂，但实际上我需要页脚在z-index方面处于顶部...它具有半透明的背景颜色，因此页面背景会稍微透过来显示。 - myermian

我不明白：你需要它在内容的顶部吗？如果你只需要页脚在其他背景上方，你仍然可以使用footer:z-index:100，但是将content:z-index:101; - cripox

z-index:101？为什么是101，它不需要z-index，因为该元素已经在顶部，它是body的父元素，而不是body内任何其他元素的父元素！ - RobertPitt

嗯，尝试的目的是让它不被锁定在一个位置，所以这不是当前问题的解决方案。 - myermian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ant Ali · Accepted Answer

您可以尝试使用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>

或者类似这样的内容 :)

安东尼