css-grids, max-height on Chrome not working?
Question
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?
4 answers
solution1
1 2017-12-07 07:02:15
Use HTML5 features.
height : 100vh;
width : 100vw;
overflow: hidden;
Set this to .app
solution2
1 2017-12-07 07:27:29
add height: 100%; to .app it'll work
.app {
min-height: 100%;
display: grid;
grid-template-rows: 100px auto;
height: 100%;
}
solution3
0 2017-12-07 07:15:29
Remove height:100% , width:100% from the body also remove min-height:100% from app. Hope this should work both browser same.
solution4
0 2017-12-07 09:59:17
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.