删除文章

确定要删除这篇文章吗?

取消
确定

使用flex固定头部和底部中间滚动

     阅读(1267)  2017-07-24 15:44:19

使用flex固定头部和底部中间滚动

关键点:

  • root纵向布局高度充满整个浏览器界面并且隐藏滚动条
  • content设置滚动,flex设置1,否则当所有item的高度太小时footer会离开底部
  • item设置高度后,必须设置flexShrink为0,否则当所有item高度超过content高度时item会被压缩掉

'100vh'浏览器视口高度的百分比,这里是100%;
flex为1其他元素为0时(默认为0),当有多余空间时会被flex为1的元素侵占;
flexShrink为0,当空间被压缩时flexShrink为0的元素不被压缩;

代码如下:

class App extends React.Component {
  render() {
    const items = [1, 2, 3, 4, 5, 6, 7]
    return (
        <div style={Style.root}>
            <div style={Style.head}>head</div>
            <div style={Style.content}>
                {items.map((item, index) => {
                    return <div key={index} style={Style.item}>{item}</div>
                })}
            </div>
            <div style={Style.footer}>footer</div>
        </div>
    )
  }
}

const Style = {}
Style.root = {
    display: 'flex',
    flexDirection: 'column',
    height: '100vh',
    overflowY: 'hidden'
}

Style.head = {
    height: 80,
    backgroundColor: '#ccc',
}

Style.footer = {
    height: 80,
    backgroundColor: '#ccc',
} 

Style.content = {
    display: 'flex',
    flexDirection: 'column',
    flex: 1, 
    overflowY: 'scroll'
}

Style.item = {
    display: 'flex',
    height: 200,
    flexShrink: 0,
    backgroundColor: 'rgb(232, 128, 36)',
    margin: 10
}

export default App;

文章评论

Keep it simple,stupid
文章数
303
总访问量
491381
今日访问
1757
最近评论

tujiaw : registerThreadInactive:如果当前没有激活的线程,就去激活线程,让等待的线程去执行任务。
hgzzx : 佩服佩服。 请教:registerThreadInactive的作用是什么?
xuehaoyun : 很不错,来围观一下
tujiaw : 抱歉csdn code服务关闭了,这个代码我也找不到了
于淞 : 你好,这个文章的源码能分享一下吗,songsong9181@163.com,谢谢了 上面的写错了
于淞 : 你好,这个文章的源码能分享一下吗,838106303@163.com,谢谢了 上面的链接不能用了
tujiaw : 多谢多谢
essaypinglun college-paper.org : 很好的博客,赞赞
Folly : 这个实现有点奇怪,Qt为什么没有统一的比对方法。
过多s : alert("hello, world!")
回到顶部