<!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撑起来中间的部分，才可以让其余的部分下沉到底部去，
折腾这个代码，折腾了一个午的时间，记录一下，防止再次遇到坑。