检查片段波纹管。
html, body {
height: 100%;
margin: 0;
}
.flex {
height: 100%;
display: flex;
flex-direction: column;
}
.body {
height: 100%;
}
nav {
overflow: hidden;
flex-shrink: 0;
display: flex;
flex-direction: row;
}
.holder {
display: flex;
flex-direction: column;
height: initial !important;
flex: 1;
}
.wrapper {
flex: 1;
display: flex;
min-height: 0;
overflow-y: auto;
}
<div class="body">
<div class="flex"><!---->
<nav style="height: 40px; background-color: blue"></nav>
<!---->
<div class="holder body">
<div class="wrapper">
<div>
<div class="holder">
<div>
<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br>v
</div>
</div>
</div>
</div>
<div>
<div style="height: 60px; background-color: red"></div>
</div>
</div>
</div>
</div>
如果您在Chrome 71-运行此,片段上方没有身体滚动,只有.wrapper
是滚动的。但在Chrome 72+同一页面有身体滚动。
编辑起源问题还与quirks mode问题。含义不<!doctype html>
这个问题确定的工作,甚至对铬72+。
在Chrome 72+需要设置最小高度上.holder
。这72之前是不需要的版本上。
html, body {
height: 100%;
margin: 0;
}
.flex {
height: 100%;
display: flex;
flex-direction: column;
}
.body {
height: 100%;
}
nav {
overflow: hidden;
flex-shrink: 0;
display: flex;
flex-direction: row;
}
.holder {
display: flex;
flex-direction: column;
height: initial !important;
flex: 1;
min-height: 0;
}
.wrapper {
flex: 1;
display: flex;
min-height: 0;
overflow-y: auto;
}
<div class="body">
<div class="flex"><!---->
<nav style="height: 40px; background-color: blue"></nav>
<!---->
<div class="holder body">
<div class="wrapper">
<div>
<div class="holder">
<div>
<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br>v
</div>
</div>
</div>
</div>
<div>
<div style="height: 60px; background-color: red"></div>
</div>
</div>
</div>
</div>