有一个JS代码可以在用户滚动页面时执行加载内容的功能,它可以正常工作。情况是,当为预期无限滚动的块明确设置特定高度时(当然,这取决于保存的数据量),一切正常。
问题在于设置一个明确的块高度,height: 100vh
或者height: 300px
说得委婉一点,从自适应模板的角度来看,这是一个不正确的解决方案。通过将属性块设置为height: 100%
函数,无限滚动将不再起作用。
所以问题是如何在flexbox
不使用明确的块高度属性(如 height: 100vh
or )的情况下让无限滚动功能工作height: 300px
?
页面布局:
html,
body {
height: 100%;
}
#workspace {
display: flex;
min-height: 100%;
}
.content {
display: flex;
flex: 1 1 auto;
}
#header,
#footer {
display: flex;
height: 56px;
}
#stretch-box {
display: flex;
flex: 1 1 auto;
}
#left-box {
min-width: 300px;
}
#right-box {
display: flex;
align-items: flex-start;
flex: 1 1 auto;
flex-flow: row wrap;
//height: 100vh;
overflow: auto;
justify-content: space-evenly;
}
<div id="workspace">
<!-- HEADER -->
<header id="header">
// data
</header>
<!-- MAIN CONTENT -->
<section class="content">
<div id="stretch-box">
<!-- LEFT BOX -->
<div id="left-box">
// data
</div>
<!-- RIGHT BOX -->
<div id="right-box">
</div>
</div>
</section>
<!-- FOOTER -->
<footer id="footer">
// data
</footer>
</div>
不使用属性
height: 100vh;
:#right-box
将属性height: 100vh;
用于#right-box
:
我尝试向每个父块添加一个相对#right-box
属性height: 100%;
,然后另外overflow: auto;
- 无济于事。