css页面布局之百分比布局
前言：有的时候我们需要页面刚好装满整个屏幕，不多不少，里面如果有子容器，希望能刚好装满父容器，不多不少。我们可以用百分比布局来实现这种效果。应用场景：富图表的大屏幕展示页面丰富交互体验的单页面程序喜欢抠页面细节的项目实现过程html,body元素高度设置为100%；容器元素（#app）,高度设置为100%；将容器继续细分为几个子盒子（subbox）,高度宽度分别设...
·
前言：
有的时候我们需要页面刚好装满整个屏幕，不多不少，里面如果有子容器，希望能刚好装满父容器，不多不少。
我们可以用百分比布局来实现这种效果。
应用场景：
- 富图表的大屏幕展示页面
- 丰富交互体验的单页面程序
- 喜欢抠页面细节的项目
实现过程
- html,body元素高度设置为100%；容器元素（#app）,高度设置为100%；
- 将容器继续细分为几个子盒子（subbox）,高度宽度分别设置为百分比形式，浮动布局。
- 在子容器里分别添加一个包裹盒子（可以用来设置背景图，盒模型设置为border-box,内边距等，高度百分比）
- 这样我们的每个元素的高度都依赖于父元素的高度。这样就能实现刚好装满屏幕的效果，测试完美
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)