Question

好的，所以我真的不知道是否可能，但我相信这必须一如既往地解决！我想要实现的目标：

得到类似的东西：

<div id="one">
   HEADER pph content...
</div>

<div id="two">
   BOTTOM php content...
</div>

<div id="three">
   BODY php content...
</div>

我将div号码放在（自动大小）div三号下面的是什么！

问题是首先生成div二号。比第三个div，我不能让它按照我想要的方式工作......

感谢您的帮助。问候。

Answer 1

将所有三个div包装在一个相对定位的div中，然后你可以绝对定位底部的“底部”div，如果你能够近似底部div的高度它会更好用，所以你可以应用相同的数量填充到包装器底部以为其创建空间

<强> CSS：

#wrapper {
  width: 700px; 
  margin: 0 auto; 
  background: #eee; 
  position: relative;
  padding-bottom: 5em;
}

#two {
  position: absolute;
  bottom: 0;
  left: 5%;
  background: #ffe;
  width: 90%;
  height: 5em;
}

<强> HTML：

<div id="wrapper">
<div id="one">
   HEADER pph content...
</div>
<div id="two">
   BOTTOM php content...
</div>
<div id="three">
   BODY php content...
</div>
</div>

更新：评论

这是一个不需要任何高度或底部填充的版本，只有在“页脚”后面没有任何内容时才有效

我把它放在一个jsfiddle中，所以你可以调整

JSFiddle示例：HERE

这个版本#two仍然是绝对定位的，而不是猜测它成为1px高占位符的高度，实际内容将溢出#two以下，因此主要内容 - {{1你需要确保div＃two（页脚）里面有一个子div，再次将它添加到你的php模板中，然后你可以按照自己的意愿设置它，如果你仍然需要它，它应该需要一个最小高度，但是这种方式应该可以正常工作，如果你因为任何原因需要下面的空白区域，你可以将#three添加到padding-bottom元素，例如

body

这个div（#two）不再“包含”在包装元素中，尽管它仍然需要它从

获取它的位置

是否有可能在第三个Div之后定位第二个生成的Div

1 个答案:

更新：评论

JSFiddle示例：HERE