Question

我有一个使用display table-cell的3 cols布局。

<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的底部？我尝试将位置设置为绝对和底部：0但在不同的浏览器中它的行为有所不同。

有什么想法吗？

解决方案：

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

jsbin

Answer 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;
}

Answer 2

我想这就是你需要的：

JSBIN

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

将div粘贴到table-cell div的底部

2 个答案:

Here's the Fiddle

HTML

CSS