样本

Question

我有一个绝对位置的div元素。位置值很重要，无法更改。如何在div中设置标题，内容和页脚？

页眉和页脚的高度是固定的，内容应占用剩余的所有空间。标题始终位于顶部和页脚底部也很重要。

父元素也应该使用可调整大小的南瓜句柄进行调整，内容应根据父元素的高度更改其高度。

.content {
    height: ?; /* What should this be?? */
}

情况的一个例子：http://jsfiddle.net/7gPzF/26/

Answer 1

样本

这样做的一种方法是使中间内容位置绝对，并在其中移动页眉和页脚。然后使用填充来抵消头部和脚部空间。

<强> HTML

.wrap {
  width: 100px;
  border: 1px solid black;
  position: absolute;
}

.header {
  position: absolute;
  height: auto;
  width: 100%;
  top: 0;
  border: 1px solid green;
}

.footer {
  position: absolute;
  width: 100%;
  height: auto;
  border: 1px solid green;
  bottom: 0;
}

.content {
  height: 100%;
  /* What should this be?? */
  border: 1px solid green;
  position: relative;
  top: 0;
  padding: 20px 0;
  /* padding height of header/footer */
  box-sizing: border-box;
}

<div class="wrap" id="wrap">
  <div class="content">
    <div class="header">header</div>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text
    <div class="footer">footer</div>
  </div>
</div>

Answer 2

我完全不明白你的意思我想，但看看这段代码，这就是你的意思吗？

制作页脚

position absolute, bottom:0px; right:0px; left:0px;

并给出了内容

height:auto;

更新：我已经看到上面的解决方案无法解决问题，如果您在内容中放置了大量文字，它将会在其下方。

更新链接： http://jsfiddle.net/7gPzF/42/

我希望我帮助过你。

Answer 3

使用jQuery，您可以计算.content

左侧空间的高度

var heightt = $("#header").outerHeight() + $("#footer").outerHeight();
    $("#content").css("height", "calc(100% - "+ heightt + "px" ).css("position", "absolute");

这是有效的：http://jsfiddle.net/yX4Py/

Answer 4

如果你不知道页眉和页脚的高度，你可以使用Javascript解决方案。

像这样：

$('#wrap .content').height($('#wrap').height() - $('#wrap .footer').outerHeight() - $('#wrap .header').outerHeight());

你的例子：

http://jsfiddle.net/7gPzF/41/

位于绝对位置的div内的标题，内容和页脚

4 个答案:

样本