纵向布局

vbox 用于对页面内容进行纵向划分,把内容划分成一行或多行,注意其中有一行必须自适应高度,否则不需要使用该样式类,直接用 div 就可以了。

header
content, this will auto fit height
footer
                            
                        

自适应行带滚动条

header

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

很长很长很长很长很长的内容

footer
                            
                        

单元格内容带滚动条

单元格内容可滚动,特别是自适应高度单元格内容带滚动条要实现还是比较麻烦的,需要嵌套几层元素,且要处理ie的行为。

加上在横向布局里提到的文本截取问题,表格布局主要就是这两大问题。如果只考虑现代浏览器,特别是移动浏览器,flexbox布局是更好的选择。