问题：

在二次开发 pgadmin4 的时候通过继承项目本身自带的 base.html 来开发一个帮助页面时，出现页面无法滚动的问题——页面内容超出屏幕后，无法向下滚动鼠标滚轮的方式浏览更多内容，屏幕右侧也不会有滚动条。

主要代码如下：

{% extends 'base.html' %}

{% block title %}在线帮助手册{% endblock %}

{% block css_link %}
{% endblock %}

{% block body %}
    <div>
        <h2 class="text-center p-3 text-light"
            style="background-color: #326690">
            XXXX功能在线帮助手册</h2>
        <div class="container-fluid p-4" id="body">
        	......
		</div>                
    </div>
{% endblock %}

{% block init_script %}

{% endblock %}

解决：

通过查看 web/pgadmin/templates 目录下的这个 base.html 文件发现：

<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>{% block title %}{% endblock %}</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- To set pgAdmin4 shortcut icon in browser -->
    <link rel="shortcut icon" href="{{ url_for('redirects.favicon') }}"/>

    <!-- Base template stylesheets -->
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='js/generated/style.css')}}"/>
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='js/generated/pgadmin.style.css')}}"/>
    {% set theme = get_theme_css() %}
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename=('js/generated/'+theme[0])) }}" data-theme="{{theme[1]}}"/>

     <!--View specified stylesheets-->
    {% block css_link %}{% endblock %}

    <script type="application/javascript">
        /* This is used to change publicPath of webpack at runtime */
        window.resourceBasePath = "{{ url_for('static', filename='js') }}/generated/";
    </script>
    <!-- Base template scripts -->
{% if requirejs is defined and requirejs is true %}
    <script type="application/javascript"
            src="{{ url_for('static', filename='vendor/require/require.js' if config.DEBUG else 'vendor/require/require.min.js') }}"></script>
    <script type="application/javascript">
            require.config({
                baseUrl: '',
{% if config.APP_VERSION_PARAM is not none and config.APP_VERSION_PARAM != '' %}
                urlArgs: '{{config.APP_VERSION_PARAM}}={{config.APP_VERSION_INT}}',
{% endif %}
                waitSeconds: 0,
                shim: {},
                paths: {
                    sources: "{{ url_for('static', filename='js') }}",
                    datagrid: "{{ url_for('static', filename='js/generated/datagrid') }}",
                    sqleditor: "{{ url_for('static', filename='js/generated/sqleditor') }}",
                    'pgadmin.browser.utils': "{{ url_for('browser.index') }}" + "js/utils",
                    'pgadmin.browser.endpoints': "{{ url_for('browser.index') }}" + "js/endpoints",
                    'pgadmin.browser.messages': "{{ url_for('browser.index') }}" + "js/messages",
                    'pgadmin.browser.constants': "{{ url_for('browser.index') }}" + "js/constants",
                    'pgadmin.server.supported_servers': "{{ url_for('browser.index') }}" + "server/supported_servers",
                    'pgadmin.user_management.current_user': "{{ url_for('user_management.index') }}" + "current_user",
                    'translations': "{{ url_for('tools.index') }}" + "translations"
                }
            });

    </script>
{% endif %}
{% if basejs is defined and basejs is true %}
    <!-- View specified scripts -->
    <script type="application/javascript" src="{{ url_for('static', filename='js/generated/vendor.main.js') }}" ></script>
    <script type="application/javascript" src="{{ url_for('static', filename='js/generated/vendor.others.js') }}" ></script>
    <script type="application/javascript" src="{{ url_for('static', filename='js/generated/pgadmin_commons.js') }}" ></script>
{% endif %}

</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

{% block body %}{% endblock %}
<script type="application/javascript">
            {% block init_script %}{% endblock %}
</script>

</body>
</html>

本身已经引入了一些样式文件。

所以应该是这些项目原始的 CSS 样式表已经对页面主体的显示做了规定，导致通过模板继承的方式开发的页面不能滚动。

多以，我们要做的就是重新设置页面 body 的样式就行：

{% extends 'base.html' %}

{% block title %}在线帮助手册{% endblock %}

{% block css_link %}	使用自定义的样式文件
    <link type="text/css" rel="stylesheet"
          href="./static/css/XXXX_onlinehelper.css"/>
{% endblock %}

{% block body %}
    <div>
        <h2 class="text-center p-3 text-light"
            style="background-color: #326690">
            XXXX功能在线帮助手册</h2>
        <div class="container-fluid p-4" id="body">
        	......
		</div>                
    </div>
{% endblock %}

{% block init_script %}

{% endblock %}

XXXX_onlinehelper.css 文件内容：

body, html {
  height: 100%;
  width: 100%;
  margin: 0 0 0 0;
  overflow: auto;
}

然后重新打包、运行项目、访问帮助页面就能实现页面滚动了。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/98034.html

解决 pgadmin4 HTML 页面无法滚动的处理

问题：

解决：

相关推荐