我的应用程序具有以下HTML
结构:
body
viewport
navbar
container
content
footer
viewport:
min-height: 100vh;
max-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
navbar/header:
background: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 20;
align-items: flex-start;
container:
flex-grow: 1;
width: 100%;
padding: 0 15px;
margin: 0 auto;
我的问题仅存在于Safari
中,因此,当content
高于视图本身时,它与header/navbar
和footer
重叠,并且突然header/navbar
不会继承其高度子元素。
示例:
[我看过flexbug,试图给出flex: 1 1 0
,flex: auto
,height:100%
等,但没有任何效果。
我通过在页眉和页脚样式表中添加min-height: fit-content;
来解决此问题。