CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
DrTosh
DrTosh

Reputation: 1

css-grids, max-height on Chrome not working?

I want to build a Website Applikation with a fixed Size.

Only a content div should be scrollable.

On FireFox my App worked correctly, but on Chrome i get a strange behaviour and i cannot figure out why?

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. Why they behave differently and how can i fix this in chrome?

Upvotes: 0

Views: 2329

Answers (4)

not_python
not_python

Reputation: 902

Use HTML5 features.

.app {
    height : 100vh;
    width : 100vw;
    overflow: hidden;
}

Upvotes: 0

Nivethi Mathan
Nivethi Mathan

Reputation: 105

Try this. It works fine in both firefox and 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

Upvotes: 0

satyajit rout
satyajit rout

Reputation: 1651

add height: 100%; to .app it'll work

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

Upvotes: 1

Raydoan Anik
Raydoan Anik

Reputation: 219

Remove height:100%, width:100% from the body also remove min-height:100% from app. Hope this should work both browser same.

Upvotes: 0

Related Questions