在一个绝对定位的div中，包含页眉、内容和页脚

Question

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

标题和页脚的高度固定，内容应占用剩余的所有空间。同时，标题始终保持在顶部，页脚始终保持在底部。

父元素还应该具有可调整大小的南向可调整大小的手柄，并且内容应根据父元素的高度改变其高度。

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

一个情境的示例：http://jsfiddle.net/7gPzF/26/

- Q D

---

您是否可以友善地为那些帮助过您的人提供一些投票和评论，以便其他查看此页面的人可以看到哪些是有用的，哪些不是？ - DreamTeK

感谢所有的回答！以下的解决方案都没有直接解决我的问题。第一个答案给了我解决这个问题的基本结构，感谢Obsidion。这是我最终在网站上使用的版本：http://jsfiddle.net/7gPzF/95/。 - Q D

@Q D 不客气。那是否意味着我的答案可以被标记为正确的？ - DreamTeK

是的，没错。这已经足够接近我所寻找的了。我是新来的，还不熟悉所有的流程。 - Q D

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>

- DreamTeK

---

如果我在内容区输入更多的文本会发生什么？ - Suresh Ponnukalai

@SureshPonnukalai 我已经更新了演示以进行补偿。我将内容更改为相对定位，并删除了包装器的固定高度。如果用户想要包装器中的固定高度，则应设置溢出隐藏，因为不需要扩展。 - DreamTeK

Answer 2

我猜我没有完全理解你的意思，但是看一下这段代码，这是你想要的吗？

制作了页脚

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

并提供了内容

height:auto;

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

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

希望能对您有所帮助。

- MBouwman

Answer 3

使用jQuery，您可以计算.content左侧空间的高度。

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

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

- sailens

Answer 4

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

就像这样：

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

你的例子：

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

- Sniper