Question

主啊，我甚至不确定如何说出这个标题。

我已经在下面列出了我想要完成的事情。 http://www.wideeyedcommunications.com/images/positioning-sample.png

我的页脚设置在屏幕底部。包含div与该页脚重叠。我需要将div的高度设置为距离屏幕底部的设定距离，而不管屏幕的分辨率或包含div中的内容数量。

所以，绿色页脚（波浪形）总是被锁定在屏幕的底部，棕色div的底部在内部，比如屏幕底部的20个像素，无论内容有多少内容那个div。

因此，如果我有一行文字而没有滚动条，那么它的高度为viewport - 20px。如果我有1000行文本和滚动条，则高度仍为viewport - 20 px。

我猜jquery可以使用类似的东西来实现：

$(".container").height(function(){
  $(window).height-20;
});

但是可以在不使用javascript的情况下完成此操作吗？

编辑：这是一些代码。

<body>
  <div style="position: relative; padding-bottom: 20px;">
    <div id="grass">&nbsp;</div>
      <div id="container">
        <div id="content">
        Navbar, content, etc goes here
        </div>
      </div>
  </div>
</body>

现有的css

#grass {
  background: url("../images/bg_grass.jpg") repeat-x scroll center bottom;
  bottom: 0;
  height: 420px;
  position: absolute;
  width: 100%;
  z-index: -10;
}
#container {
  margin: 35px auto 0;
  position: relative;
  width: 960px;
}
#content {
  background: none repeat scroll 0 0 #FFF8ED;
  border: 2px solid #764C29;
  border-radius: 13px 13px 13px 13px;
  margin-bottom: 20px;
  overflow: hidden;
}

我刚刚将演示网站上传到http://jsfiddle.net/Fireflight/HQvay/

Answer 1

您必须在容器中添加margin-bottom，然后使用jQuery设置它的高度：

CSS：

.container { margin: 20px auto }

使用Javascript：

$(window).resize(function(){
      $('.container').css('height', $(window).height() - 40);
}).resize();

注意：如果您的容器有填充和/或边框，则必须在计算中包含这些内容。

Answer 2

.container
{position:absolute;
 bottom:20px;}

你试过那个吗？（可以使用fixed但是所有都取决于代码。我们可以有更多的HTML标记吗？）

Answer 3

在我看来，你只需要为你的div添加一个margin-bottom: 20px样式，它总是至少与页面底部保持20px。

Answer 4

可以对此进行调整。您需要更改页脚以显示zindex：-1

<style>
* {
    margin:0px;
    padding:0px;
}
.page {
    min-height:100%;
    height: auto !important; // modern browser see this instead of the height: 100%
    height: 100%; // IE sees this but allows block to expand.
    position: absolute;
    width: 100%;
}
</style>

<div class="page">

<div style="height:100px; "> content
</div>

<div style="height:333px; "> empty space provided so content does not slide under footer </div>

<div style="position:absolute; bottom:0px; height:333px ">

Min height Hack to make page be at least 100% of screen size
but if content is bigger then scroll bars appear and
this information is under the content. Works with quirk mode browsers.

</div>
</div>

是否可以将div的高度设置为距固定位置页脚底部的设定距离？

4 个答案: