html - 如何在静态和可滚动部分上拆分页面？

问题描述

我想将网页分成两部分。静态（顶部）和可滚动（底部）。问题是我创建了一个具有固定宽度和高度的可滚动框的解决方案。但是我看到了一个页面示例，其中底部和右侧部分受到浏览器屏幕大小的限制，并且滚动条始终可见。使用固定尺寸的盒子，如果屏幕很小，这将不起作用。滚动条将被隐藏。

到目前为止，我只尝试了 HTML 和 CSS 方法。我使用 Flask 和 Python 3 作为引擎。

这是我已经创建的。第一个是 base.html，第二个是 data_entry.html：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="static/css/style.css">
        <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>
    </head>
    <body class="stop-scrolling">
        {% block content %}{% endblock %}
    </body>
</html>

{% extends 'base.html' %}
{% block content %}
    <h2><br>{{title}}</h2>
    <br>
    <h3>Searchable fields</h3>
    <div style="float:top; width:2000px">
        <form action="/data_entry" method="POST">
            <table>
            <tbody>
            <tr>
...
            </tr>
            </tbody>
            </table>
            <input type="submit" class="button" value="Search">
        </form>
    </div>
    <div style="float:bottom; width:2000px; height:400px; overflow:auto;">
        <table class="tableborder">
            <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>
    </div>
{% endblock %}

标签： htmlcsspython-3.xflask

html - 如何在静态和可滚动部分上拆分页面？

问题描述

解决方案

推荐阅读