将 div 粘贴到表格单元格 div 的底部答案

【问题标题】：Stick a div to the bottom of a table-cell div将 div 粘贴到表格单元格 div 的底部
【发布时间】：2014-06-15 15:56:12
【问题描述】：

我有一个使用显示表格单元格的 3 列布局。

<div id=left>
  LONG Left menu
</div>
<div id=content>
  Some text content
  <div id=toolbar></div>
</div>
<div id=right>
  LONG Right menu
</div>

是否可以通过 LONG 左右菜单将工具栏粘贴到内容 div 的底部？我尝试将位置设置为 absolute 和 bottom:0，但它在不同浏览器中的行为不同。

有什么想法吗？

解决方案：

我找到了一个适用于 ie,ff,chrome 的解决方案。放置一个包装器 div 并将容器表的高度设置为 0px 解决了这个问题。

jsbin

【问题讨论】：

这似乎是一个 CSS 问题，但我没有看到任何 CSS。您可以发布您的 CSS 或设置一个 jsfiddle 来复制该问题吗？
很难用 html 来回答。我建议您尝试引导程序。他们使这些事情变得非常简单，并且有非常好的文档。
用 chrome 和 firefox 试试这个：jsbin.com/qudotuyo/1/edit

标签： css alignment css-tables

【解决方案1】：

这可能就是你要找的：

您需要将父级div 设置为position: relative，将子级div 设置为position: absolute，然后设置与父级div 两侧的距离。即top: 0 将其位置设置为 div 的底部。 left: 0 对齐它，使其粘在父 div 的左侧。

Here's the Fiddle

HTML

<div id="content"> <!--Parent Div-->
  Some text content
  <div id="toolbar"></div> <!--Child Div-->
</div>

CSS

#content {
    background: blue;
    width: 500px;
    height: 500px;
    position: relative;
}
#toolbar {
    background: grey;
    width: 500px;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
}

【讨论】：

【解决方案2】：

我想这就是你需要的：

JSBIN

#content {
  position: relative;
}
#toolbar {
  position: absolute;
  bottom: 0;
}

【讨论】：