php - 是否可以在第三个 Div 之后放置第二个生成的 Div

Question

好吧，所以我真的不知道这是否可能，但我相信这一定是一如既往的解决方法!我想要实现的目标:

有类似的东西:

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

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

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

我要将第二个 div 放在(自动调整大小)第三个 div 的下面!

问题是第 2 个 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 下方，并且因此主要内容 - #three - 你需要确保 div#two(页脚)里面有一个子 div，再次将它添加到你的 php 模板中，然后你可以根据需要设置样式，如果您仍然需要它，它应该采用最小高度，但这种方式应该可以正常工作，如果您出于任何原因需要在此下方的空白区域，您可以将 padding-bottom 添加到 body 元素例如

body {padding-bottom: 10em;}

这个 div (#two) 不再“包含”在包装器元素中，尽管它仍然需要它来占据它的位置

---