弹性盒模型实现两栏布局

思路：
首先对html，body设置高度为100%，并且对body设置为相对定位，把头部和底部，用定位的方式固定好，使用弹性盒模型，中间占据剩余的等份，但是由于绝对定位不暂居空间，因此需要设置maging或者padding，距离上下的高度。
然后对main里面进行分割，对main使用弹性盒模型，宽设置好，高度为100%,中间占据剩余空间即可。

HTML

  <header>1</header><main><div class="left">1</div><div class="center">3</div><div class="right">2</div></main><footer>3</footer>

CSS

  <style>* {margin: 0;padding: 0;}html,body {height: 100%;}body {display: flex;flex-direction: column;}header,footer {height: 40px;background: yellow;}header {position: fixed;top: 0;left: 0;right: 0;}main {flex: 1;padding: 40px 0;background: blue;height: 100%;display: flex;}main .left {width: 200px;background: red;height: 100%;}main .center {flex: 1;background: orange;height: 100%;}main .right {width: 200px;background: pink;height: 100%;}footer {position: fixed;bottom: 0;left: 0;right: 0;}</style>

弹性盒模型实现两栏布局相关推荐

css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
弹性盒模型 Flex
1. 什么是弹性盒模型传统布局基本依靠display float position来完成,有些特殊的布局写起来不太方便. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当 ...
CSS3弹性盒模型布局模块介绍
来源:Robert's talk 原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-i ...
前端笔记之移动端响应式（中）视口百分比布局弹性盒模型remfillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型元素分类常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
弹性盒模型响应式布局
1.移动端布局与PC端的区别 PC端最常用的布局是固定宽度(980px,960px,1000px,1200px);移动端网页是可以横屏看也可以竖屏看,屏幕的分辨率不同,固定宽度的布局必然是不可行的. ...
【转载】前端笔记之移动端响应式（中）视口百分比布局弹性盒模型remfillpage...
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
从零开始学前端：弹性盒模型（flex布局） --- 今天你学习了吗？（CSS：Day19）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:字体图标的引入 - 今天你学习了吗?(CSS:Day18) 文章目录从零开始学前端:程序猿小白也可以完全 ...
弹性盒模型（部分布局超好用）
使用弹性盒模型的目的: 1.提供一种更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使他们的大小是未知的变化的. 2.让容器有能力改变项目的宽高,以填满可用的空间. 3.布局与方向无关属性: ...

弹性盒模型实现两栏布局

目录

弹性盒模型实现两栏布局

弹性盒模型实现两栏布局相关推荐

最新文章

热门文章