Flask条件渲染页面中Footer显示在顶部的问题排查

问题场景 #

在<main>标签中使用Flask条件渲染后，<footer>标签被放置在<main>下方，但footer却显示在页面顶部；而在没有Flask条件渲染的页面中，footer位置正常。

相关代码 #

<!DOCTYPE html>
<html >
<head>
 <meta charset="UTF-8">
 
 <!-- Make it compatible to mobile devices -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <title>Diabetes Risk Prediction</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
</head>

<body>
   <main class="result-main">   
   {% if result == "Positive": %}
       <p class="danger">You have high risk of type-2 diabetes. See a doctor immediately!</p>
       <p class="resources">Check out these resources to learn more about diabetes</p>
       <ul>
           <li><a href="https://canohealth.com/news/blog/the-difference-between-type-1-and-type-2-diabetes/#:~:text=Type%201%20diabetes%20is%20caused,to%20lower%20the%20blood%20sugars.">
               Difference between type-1 and type-2 diabetes</a></li>
           <li><a href="https://www.niddk.nih.gov/health-information/diabetes/overview/managing-diabetes">Managing diabetes</a></li>
           <li><a href="https://www.webmd.com/diabetes/diabetes-lifestyle-tips">Lifestyle changes to help control your diabetes</a></li>
       </ul>
   {% elif result == "Negative" %}
       <p class="out-of-danger">You have no risk of diabetes. Keep up the healthy habits!</p>
       <p class="resources">These resources might help you keep the diabetes away</p>
       <ul>
           <li><a href="https://www.mayoclinic.org/diseases-conditions/type-2-diabetes/in-depth/diabetes-prevention/art-20047639">Diabetes prevention</a></li>
           <li><a href="https://www.healthline.com/nutrition/prevent-diabetes">11 Ways to Prevent Type 2 Diabetes</a></li>
       </ul>
   {% endif %}
   </main>
   <footer>
       <p>He who has health, has hope; and he who has hope, has everything - Thomas Carlyle</p>
   </footer>
</body>
</html>

页面效果 #

• 正常效果（footer在底部）：
  
• 异常效果（footer在顶部）：
  

原因分析 #

异常的核心原因是：当后端传递的result变量既不是"Positive"也不是"Negative"时，<main>标签内没有任何内容被渲染，此时<main>元素高度为0（或未占据页面空间），footer会自动向上填充页面顶部的空白区域。

解决方案 #

方案1：补全条件判断的默认分支 #

给Flask模板的条件判断添加{% else %}分支，确保无论result是什么值，<main>内都有内容输出，从而让<main>占据页面空间，footer自然落在底部：

<main class="result-main">   
{% if result == "Positive": %}
    <!-- 原有Positive分支内容 -->
{% elif result == "Negative" %}
    <!-- 原有Negative分支内容 -->
{% else %}
    <p class="default">暂无预测结果，请重新尝试。</p>
{% endif %}
</main>

方案2：通过CSS实现粘性Footer #

如果希望即使<main>为空时，footer也固定在页面底部，可以修改CSS，利用flex布局实现粘性效果：

html, body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

main.result-main {
    flex: 1; /* 让main占据剩余空间 */
}

footer {
    /* 保留原有footer样式，无需额外修改 */
}

验证建议 #

1. 检查后端代码，确认result变量的取值范围，是否存在未覆盖的情况（比如None、空字符串等）。
2. 测试上述任一方案后，验证footer位置是否恢复正常。

内容的提问来源于stack exchange，提问作者Tooba Jamal