如何将网页拆分为顶部静态固定区域、底部自适应屏幕可滚动区域

实现方案 #

核心用Flex垂直布局实现上下区域高度自适应，替换原有无效的float属性和固定宽高配置，具体修改步骤如下：

1. 新增/修改static/css/style.css样式 #

/* 全局样式初始化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100vh;
  overflow: hidden;
}
/* 整体页面容器 */
.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 顶部固定区域 */
.header-fixed {
  flex-shrink: 0;
  padding: 12px;
}
/* 底部自适应滚动区域 */
.scrollable-content {
  flex-grow: 1;
  overflow: auto;
  padding: 0 12px 12px;
}
/* 宽表格适配，保留原有的2000px宽度需求 */
.wide-table {
  min-width: 2000px;
}

2. 修改base.html结构 #

把原写在<head>里的导航链接移到页面结构中，新增分层容器：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="static/css/style.css">
    </head>
    <body>
        <div class="page-container">
            <!-- 顶部固定区域 -->
            <div class="header-fixed">
                <a href="{{ url_for('index') }}">Home</a>
                <a>&nbsp;&nbsp;</a>
                <a href="{{ url_for('data_entry') }}">Data entry</a>
                <a>&nbsp;&nbsp;</a>
                <a href="{{ url_for('help') }}">Help</a>
                {% block header %}{% endblock %}
            </div>
            <!-- 底部可滚动区域 -->
            <div class="scrollable-content">
                {% block content %}{% endblock %}
            </div>
        </div>
    </body>
</html>

3. 修改data_entry.html插槽分配 #

把搜索表单放到顶部固定区域插槽，表格放到滚动区域插槽，删除无效的样式配置：

{% extends 'base.html' %}
{% block header %}
    <h2><br>{{title}}</h2>
    <br>
    <h3>Searchable fields</h3>
    <div>
        <form action="/data_entry" method="POST">
            <table class="wide-table">
            <tbody>
            <tr>
...
            </tr>
            </tbody>
            </table>
            <input type="submit" class="button" value="Search">
        </form>
    </div>
{% endblock %}

{% block content %}
    <table class="tableborder wide-table">
        <thead>
            <tr class="tableheaderborder">
                {% for h in selected_header %}
                    <td class="tableheaderborder"> {{ h }} </td>
                {% endfor %}
            </tr>
        </thead>
        <tbody class="tableborder">
            {% for row in selected_entries %}
                <tr class="tableborder">
                    {% for column in row %}
                        <td class="tableborder"> {{ column }} </td>
                    {% endfor %}
                </tr>
            {% endfor%}
        </tbody>
    </table>
{% endblock %}

最终效果 #

• 顶部导航、搜索表单固定不随滚动位移
• 底部表格区域自动占满屏幕剩余高度，内容超出时自动显示纵向滚动条
• 表格宽度超出屏幕时自动显示横向滚动条，适配所有尺寸的设备屏幕，不会出现滚动条被遮挡的问题

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