海宁住房和城乡规划建设局网站,wordpress ghost,模板网字体库免费,甘肃省临夏州建设局网站1. 使用绝对定位对这三栏都实现绝对定位#xff0c;其中中间绝对定位的位置是上下两栏的高度#xff0c;内容超出则中间部分出现流动条#xff1b;代码实现#xff1a;绝对定位实现html,body,div{padding:0;margin:0;}.header{position:absolute;top:0; /*头部绝对定位位置…1. 使用绝对定位对这三栏都实现绝对定位其中中间绝对定位的位置是上下两栏的高度内容超出则中间部分出现流动条代码实现绝对定位实现html,body,div{padding:0;margin:0;}.header{position:absolute;top:0; /*头部绝对定位位置*/height:100px;width:100%;background: red;}.footer{position:absolute;bottom:0;/*尾部绝对定位位置*/height:100px;width:100%;background:yellow;}.main{position:absolute;width:100%;top:100px; /*中间自适应部分绝对定位位置top是头部的高度*/bottom:100px; /*bottom是尾部的高度*/background: #ccc;overflow:auto; /*超出的部分滚动条显示*/}我是头部我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是中间自适应我是尾部2. 使用flex布局还可以使用flex布局实现这一布局将flex-direction设置为column定义排列方向为竖排还需注意的是要定义页面的整体高度为100%flex布局实现html,body{padding:0;margin:0;height:100%; /*定义页面整体高度为100%重要*/}.container{display:flex; /*父元素的定义为flex布局*/height:100%; /*这里也要定义重要*/width:100%;flex-direction: column; /*定义排列方向为竖排*/}.header{height:100px; /*头部固定高度*/background: red;}.footer{height:100px; /*尾部固定高度*/background: yellow;}.main{background: #ccc;flex:1; /*中间分配剩下的所有空间*/overflow:auto;}我是头部我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是flex布局实现的中间自适应我是尾部
