CSS网格，Chrome上的最大高度无法正常工作？

Question

I want to build a Website Applikation with a fixed Size. 我想建立一个固定大小的网站推荐。

Only a content div should be scrollable. 只有内容div应该是可滚动的。

On FireFox my App worked correctly, but on Chrome i get a strange behaviour and i cannot figure out why? 在FireFox上，我的应用程序正常运行，但是在Chrome上却出现了奇怪的行为，我不知道为什么？

I extract the problem in a small example as follows. 我在一个小例子中提取问题，如下所示。

<!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>

in firefox just the red div got a scrollbar, but in chrome the whole page get one. 在Firefox中，只有红色的div有一个滚动条，而在chrome中，整个页面只有一个。 Why they behave differently and how can i fix this in chrome? 为什么它们的行为有所不同，我该如何在Chrome中解决此问题？

Answer 1

Use HTML5 features. 使用HTML5功能。

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

Set this to .app 将此设置为.app

Answer 2

add height: 100%; 增加height: 100%; to .app it'll work 到.app它将起作用

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

Answer 3

Remove height:100% , width:100% from the body also remove min-height:100% from app. 从身体移除height:100% ， width:100% ，同时从应用中移除min-height:100% 。 Hope this should work both browser same. 希望这两个浏览器都可以使用。

Answer 4

Try this. 尝试这个。 It works fine in both firefox and chrome. 在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>

note : setting height&width dynamically using javascript will be better 注意：使用javascript动态设置高度和宽度会更好

CSS网格，Chrome上的最大高度无法正常工作？

问题描述

4 个解决方案

解决方案1
1 2017-12-07 07:02:15

解决方案2
1 2017-12-07 07:27:29

解决方案3
0 2017-12-07 07:15:29

解决方案4
0 2017-12-07 09:59:17

CSS网格，Chrome上的最大高度无法正常工作？

问题描述

4 个解决方案

解决方案1 1 2017-12-07 07:02:15

解决方案2 1 2017-12-07 07:27:29

解决方案3 0 2017-12-07 07:15:29

解决方案4 0 2017-12-07 09:59:17

解决方案1
1 2017-12-07 07:02:15

解决方案2
1 2017-12-07 07:27:29

解决方案3
0 2017-12-07 07:15:29

解决方案4
0 2017-12-07 09:59:17