如何解决如何将深度嵌套的列表缩小到窗口中剩余的空间,以使页面不滚动但列表缩小并可以滚动
这是解决方案。
CSS:
<div style={{display:'flex',alignItems:'center'}}>
<HomeIcon/>
<Tab label="Home" />
</div>
注意:
100vh,100vw表示视口高度和宽度的100%。
高度:100%;子元素中的总是相对于直接父元素,如果直接父元素没有指定100%的高度,则不会执行任何操作。这就是为什么我必须指定高度:100%;在.playlist-container和.playlist-row中。
身体的位置:相对; .playlist-page具有position:absolute;因为在React中,.playlist-page不会是身体的直接子元素,并且我们将无法设置高度:100%;对于所有的亲生父母。
flexshrink:1;需要最小高度:0;和最大高度:100%;迫使元素缩小到小于其内容的大小。
HTML:
html {
height: 100vh;
width: 100vw;
}
body {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.playlist-page {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
position: absolute;
}
.playlist-header {
flex-shrink: 0;
}
.playlist-fill {
flex-shrink: 1;
min-height: 0;
max-height: 100%;
}
.playlist-container {
height: 100%;
}
.playlist-row {
height: 100%;
}
.playlist-pane {
display: flex;
flex-direction: column;
height: 100%;
}
.playlist-pane-header {
flex-shrink: 0;
}
.playlist-list {
flex-shrink: 1;
min-height: 0;
max-height: 100%;
overflow: auto;
border-style: solid;
border-color: blue;
}
可执行文件:
https://codesandbox.io/s/long-leftpad-ltx97
在新窗口中打开预览并垂直调整其大小。当列表框的内容比页面高时,将显示滚动条。
解决方法
再次提供解决方案,我必须输入至少30个字符。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。