html - 粘性页脚不适用于移动设备

Question

我想为我的卡路里计算器创建一个粘性/ float 底部页脚，事实是，它在桌面上运行良好，但在移动设备上运行不佳。任何想法可能是什么问题？

HTML:

<footer class="footer">
    <div class="summary">
        <table id="nodecor">
            <tr>
                <th>Total Calories: </th>
                <th>Carbs: </th>
                <th>Fat: </th>
                <th>Protein:</th>
            </tr>
            <tr>
                <td class="bigtext"><span id="total">0</span> G</td>
                <td class="bigtext"><span id="totalCarbs">0</span> G</td>
                <td class="bigtext"><span id="totalFats">0</span> G</td>
                <td class="bigtext"><span id="totalProteins">0</span> G</td>
            </tr>
        </table>
    </div>
</footer>

CSS:

    .footer {

  padding: 10px;
  height:15%;
  position: fixed;
  width:100%;
  bottom: 0;
  left: 0;
  right: 0;
}

这是 Codepen link因为它可能更容易可视化。

感谢任何帮助!

Answer 1

您遇到问题的原因似乎是您的 html 代码格式错误。为您在问题中提到的 html 代码尝试这种格式。

<footer class="footer">
    <div class="summary">
        <table id="nodecor">
            <tr>
                <th>Total Calories: </th>
                <th>Carbs: </th>
                <th>Fat: </th>
                <th>Protein: </th>
            </tr>
            <tr>
                <td class="bigtext"><span id="total">0</span> G</td>
                <td class="bigtext"><span id="totalCarbs">0</span> G</td>
                <td class="bigtext"><span id="totalFats">0</span> G</td>
                <td class="bigtext"><span id="totalProteins">0</span> G</td>
            </tr>
        </table>
    </div>
</footer>