Question

这很难解释，所以我会尽我所能：

我希望将文本内容固定在div的底部 - 这样无论内容有多长，它总是设置在底部。

所以，如果我有：

HEADER
内容1
内容2

内容2将从父div的底部排列约20px，如果我有：

HEADER
内容1

即使内容较少，内容1也会与父div的底部大约相差20px。

这可以在没有表的情况下动态完成吗？

Answer 1

是的，只需将header和content包裹在一个div中，就像这样：

<div id="parent">
  <div class="to_bottom">
    <h1>Header</h1>
    <p>Content 1</p>
    <p>Content 2</p>
  </div>
</div>

然后使用这个CSS：

#parent { position: relative }
.to_bottom { 
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
}

更多信息：绝对定位可以相对于任何一方：顶部，左侧，底部，右侧。或者是一个组合。

所以：bottom: 0; right: 0锚定在右侧和底部，但不是顶部或左侧。它基本上变成：bottom: 0; right: 0; top: auto; left: auto。

同样地，使用bottom: 20px; left: 0将其锚定在左下方，距离底部20px。

Answer 2

<div>
  <div id="header" style="position: absolute; top: 0px; left:0px; right: 0px; height:105px;">
  </div>
  <div id="content" style="position: absolute; top: 105px; left:0px; right: 0px; bottom: 20px; height:105px;"> 
  </div>
  <div id="footer" style="position: absolute; bottom: 0px; left: 0px; right: 0px; height: 20px;">
  </div>
</div>

希望这会给你一个想法...

Answer 3

我似乎遇到了类似的问题，需要将某些内容与div的底部对齐，而不管其上方内容的高度如何。我可以在jQuery UI position plugin进行一些搜索，现在就开始看一下......也许对你有所帮助。

如何设置“绝对文本底部”以便进一步向上扩展文本？

3 个答案: