如何将div放置到容器的底部？

我需要将<div id="group-of-tables">设置为<div class="item-content">和的底部，而不使用绝对位置。如何将div放置到容器的底部？

HTML：

<div class="item-content"> 
    <div id="group-of-tables"> 
     <table class="item" id="first-table"> 
      <tr> 
       <td><div class="" id="">1</div></td> 
       <td><div class="" id="">2</div></td> 
       <td><div class="" id="">3</div></td> 
       <td><div class="" id="">4</div></td> 
      </tr> 
     </table> 
     <table class="item" id="second-table" border="1"> 
      <tr> 
       <td><div class="" id="">Next</div></td> 
      </tr> 
     </table> 
    </div> 
</div>

CSS：

.item-content{ 
    height:100%; 
}

事情是这样的：

enter image description here

来源

2015-06-27 Ruslan Lomov

我想不出别的办法做比绝对定位。位置：固定;底部：0;也不方便（我想它是，因为它坚持浏览器窗口）？ –

也许用'vertical-align：bottom;'。看到一个[演示在这里]（https://jsfiddle.net/lmgonzalves/hyoxv5gj/）。 – lmgonzalves

为什么你不想使用'position：absolute'？ – Khalos

您可以用CSS 01做，并且不要忘记在所有与flex相关的规则前加上它以使其运行更多浏览器，请访问this link以查看更多支持细节，请访问this link以了解更多信息。

JsFiddle Demo

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrap { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
} 
 
.top { 
 
    flex: 1; 
 
}

<div class="wrap"> 
 
    <div class="top">Top</div> 
 
    <div class="bottom">Bottom</div> 
 
</div>

来源

2015-06-27 20:05:15 Stickers

基本上我需要附加div与ID组表底部的项目内容 –

@RuslanLomov是的，我试图让演示尽可能简单（并显示你如果你也有顶部的内容），[这个演示]（http://jsfiddle.net/56y1hhhs/）是你问我想的。 – Stickers

如果项目内容的高度在整页加载后在脚本中设置，该怎么办。它从一开始就不是100％。 –

如何将div放置到容器的底部？

回答

相关问题