CSS溢出-y:滚动；在 chrome 中有效，但在 html 标签的边缘无效

Question

我正在处理我想让整个页面可滚动的网页，当我在 html 标签上添加 overflow-y:scroll 时，它在 Chrome 浏览器中完美运行，但在 Edge 中不行和 Firefox。

我该如何解决这个问题？

这是index.html

{% extends 'base.html' %}
    {% block content %}
    <div class="container-fluid">
    <div class="col-md-auto col-sm-auto col-lg-auto position-relative mx-auto">
        <h1 class="postmod">მოგესალმებით ციფრული ლიტერატურის 
    პორტალზე</h1>
    </div>


</div>

<div class="container-fluid mainnews">
    <div class="col-md-auto col-sm-auto col-lg-auto position-relative">
        <h2 class="postmod">სიახლეები</h2>
         {% for new in news %}
        <h4>{{ new.title }}</h4>
        <p>{{ new.message }}</p>
    {% endfor %}

    </div>

</div>
    {% endblock %}

这是master.css个文件

html {
  min-height: 0px;
  height: 100%;
  width: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  position: fixed;
  overflow:scroll;
  


}

body{

    background-color: transparent;
    color: #0d6efd;
    overflow-y:scroll;

    height: 100%;
    min-height: 0px;

}

Answer 1

您可能使用的是旧版本的 Edge 和 Firefox。检查此 link 以查看哪些版本支持 overflow-y：www3schools - overflow-y

Answer 2

根据caniuse.com, overflow-y:scroll works on Microsoft Edge.

It is tested with the same code and the text was just copied and pasted.

CSS溢出-y:滚动；在 chrome 中有效，但在 html 标签的边缘无效

CSS overflow-y:scroll; works in chrome but not in edge on html tag

html

css

scrollbar

overflow

microsoft-edge