Question

我想构建一个固定大小的网站应用程序。

只有内容div可以滚动。

在FireFox上我的应用程序工作正常，但在Chrome上我得到一个奇怪的行为，我无法弄清楚为什么？

我在一个小例子中提取问题如下。

<!DOCTYPE html>
<html>
<head>
    <title>App</title>
    <style>
        html, body
        {
            left: 0;
            top: 0;
            margin: 0;
            width: 100vw;
            height: 100vh;
        }

        .app
        {
            height : 100vh;
            width : 100vw;
            /*overflow: hidden;*/
            display: grid;
            grid-template-rows: 100px auto;
        }

        .content
        {
            display: grid;
            grid-template-columns: 500px auto;
            height: 100%;
            max-height: 100%;
        }

        .scrollable
        {
            overflow: auto;
            max-height: 100%;
        }

        .red
        {
            background-color: red;
        }

        .yellow
        {
            background-color: yellow;
        }

        .blue
        {
          background-color: blue;
        }
    </style>
</head>

<body>
  <div class="app">
    <div class="yellow"></div>
    <div class="content">
      <div class="red scrollable">
        some content <br />
        some content <br />
        .
        .
        .
        some content <br />
        some content <br />
      </div>

      <div class="blue scrollable"></div>
    </div>
  </div>
</body>

</html>

在Firefox中只是红色div得到了一个滚动条，但在chrome中整个页面得到一个。为什么他们的行为不同？我如何在Chrome中解决这个问题？

Answer 1

使用HTML5功能。

height : 100vh;
width : 100vw;
overflow: hidden;

将此设置为.app

Answer 2

将height: 100%;添加到.app，以便

工作

.app {
    min-height: 100%;
    display: grid;
    grid-template-rows: 100px auto;
    height: 100%;
}

Answer 3

从正文中删除height:100%，width:100%也会从应用中删除min-height:100%。希望这对两个浏览器都有效。

Answer 4

试试这个。它在firefox和chrome中都运行良好。

 <!DOCTYPE html>
<html>
<head>
<title>App</title>
    <style>
   html, body
            {
                left: 0;
                top: 0;
                margin: 0;
                width: 100vw;
                height: 100vh;
            }

            .app
            {
                height : 100vh;
                width : 100vw;
                overflow: hidden;
                display: grid;
                grid-template-rows: 100px auto;
            }

            .content
            {
                display: grid;
                grid-template-columns: 500px auto;
                height: 90vh;
            }

            .scrollable
            {
                overflow: auto;
                max-height: 100%;
            }

            .red
            {
                background-color: red;
            }

            .yellow
            {
                height:10vh;
                background-color: yellow;
            }

            .blue
            {
              background-color: blue;
            }
    </style>
</head>

<body>
  <div class="app">
    <div class="yellow"></div>
    <div class="content">
      <div class="red scrollable">
        some content <br />
        some content <br />
        .
        .
        .
        some content <br />
        some content <br />
      </div>

      <div class="blue scrollable"></div>
    </div>
  </div>
</body>

</html>

注意：使用javascript动态设置高度和宽度会更好

css-grid，Chrome上的max-height无法正常工作？

4 个答案: