weui 的tabbar如何固定在底部

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" style="height:100%;">

<body style="height:100%;">
  <div class="page" style="height:100%;">
     <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <div class="weui-tab__panel">
             </div>
            <div class="weui-tabbar tab-bottom">
                <a th:onclick="'javasctipt:gototitlecard()'" class="weui-tabbar__item weui-bar__item_on">
                    <span style="display: inline-block;position: relative;">
                        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
                    </span>
                    <p class="weui-tabbar__label">题卡</p>
                </a>
                <a th:onclick="'javasctipt:collecttitle()'" class="weui-tabbar__item">
                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                    <p class="weui-tabbar__label">收藏</p>
                </a>
                <a th:onclick="'javasctipt:outnotebox()'" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                    </span>
                    <p class="weui-tabbar__label">笔记发表</p>
                </a>
            </div>
            <div class="weui-tabbar tab-bottom">
                <a th:onclick="'javasctipt:pre()'" class="weui-tabbar__item">
                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                    <p class="weui-tabbar__label">上一题</p>
                </a>
                <a th:onclick="'javasctipt:next()'" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                    </span>
                    <p class="weui-tabbar__label">下一题</p>
                </a>
                <a th:onclick="'javasctipt:submittitle()'" class="weui-tabbar__item">
                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                    <p class="weui-tabbar__label">提交</p>
                </a>
            </div>
        </div>
    </div>
</div>
<body>
</html>

总之就是一定要加一个panel撑起来中间的部分，才可以让其余的部分下沉到底部去，
折腾这个代码，折腾了一个午的时间，记录一下，防止再次遇到坑。
来源：https://www.cnblogs.com/EarlyBridVic/p/12331240.html
标签
WeUI
class