如何将div定位到容器的底部？

Question

我需要将<div id="group-of-tables">设置为<div class="item-content">的底部，将设置为不使用绝对位置。

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

这样的事情：

Answer 1

您可以使用CSS flex执行此操作，并且不要忘记为所有与Flex相关的规则添加前缀以使其能够使用更多浏览器，请访问this link以查看更多支持详细信息，访问{{ 3}}了解更多。

<强> this link

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>