css之页面三列布局之左右上下高度固定，中间自适应
第一种，绝对定位
!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>头尾固定中间高度自适应布局</title>
<style>
html, body {
height:%;
margin:;
padding:
}
#dHead {
height:100px;
line-height:100px;
background:#;
width:%;
position:absolute;
z-index:;
top:;
text-align:center;
}
#dBody {
background:#FC0;
width:%;
overflow:auto;
top:100px;
position:absolute;
z-index:;
bottom:100px;
}
.mycontent {
padding:20px;
}
#dFoot {
height:100px;
line-height:100px;
background:#;
width:%;
position:absolute;
z-index:;
bottom:;
text-align:center;
}
</style>
</head> <body>
<div id="dHead">固定头部100px;</div>
<div id="dBody">
<div class="mycontent"> 中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
</div>
</div>
<div id="dFoot">固定尾部100px</div>
</body>
</html>
第二种：flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.main-flex{
display: flex;
height: 500px;
flex-direction: column;
}
.main-flex .top,.main-flex .bottom{
height: 60px;
background: red;
}
.main-flex .middle{
flex: ;
background: blue;
}
</style>
</head>
<body>
<div class="main-flex">
<div class="top">头部</div>
<div class="middle">
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p> </div>
<div class="bottom">尾部</div>
</div>
</body>
</html>
css之页面三列布局之左右上下高度固定，中间自适应的更多相关文章
- css之页面三列布局之左右两边宽度固定，中间自适应
左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...
- css之页面三列布局
左右两边宽度固定,中间自适应 第一种方法:左右两边绝对定位 html代码 <div class="left"></div> <div class=&q ...
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？
使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- CSS设计一个三列布局的页面
探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要.无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset. 01 /* 02 KISSY CSS Rese ...
- css三列布局之双飞翼pk圣杯
三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...
- CSS三列布局
× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...
随机推荐
- ssm+mysql 时间显示相差了12小时的问题 Gson
怎么改时区,连接字符串加时区都无效,后来才发现原来返回的是对的,并不是时区问题. 后来感觉是gson问题,关键是在其他数据表并没有这个问题. 把 gson改成 Gson gson = new Gson ...
- 【SQL】语句/函数汇总
1.CHARINDEX(短字符A,长字符B) 说明:返回A在B的位置,从1开始,若B中不存在A,则为0 例如: SELECT CHARINDEX('aaaa','abaaaacded') ----- ...
- SDUTOJ 2498 数据结构实验之图论十一：AOE网上的关键路径
题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Index/problemdetail/pid/2498.html 题目大意 略. 分析 ...
- 将本地已有的一个项目上传到新建的git仓库的方法
将本地已有的一个非git项目上传到新建的git仓库的方法一共有两种. 一. 克隆+拷贝 第一种方法比较简单,直接用把远程仓库拉到本地,然后再把自己本地的项目拷贝到仓库中去.然后push到远程仓库上去即 ...
- Lucene字段
字段是最低单元或索引过程的起点.它代表其中一个键被用于识别要被索引的值的键值对关系.用于表示一个文件的内容的字段中将具有键为“内容”和值,可以包含文本或文档的数字内容的部分或全部. Lucene可以索 ...
- Spring Boot跨域问题解决方案
@Configurationpublic class CorsConfig { @Bean public FilterRegistrationBean corsFilter() { UrlBasedC ...
- python学习9—文件基本操作与高级操作
python学习9—文件基本操作与高级操作 1. 文件基本操作 打开文件,获得文件句柄:f = open('filename',encoding='utf-8'),open会查询操作系统的编码方式,并 ...
- wpf中datagrid绑定数据源发生改变
1.若datagrid绑定的数据源是同一个的话,即使里面的数据不同.页面也不会刷新,则需要重置数据源,再绑定.处理如下: datagrid1.ItemsSource=ListModule; 若List ...
- 一起感受HTML5和CSS3
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和&l ...
- Vue下渐变效果有时候失效
记录一个问题:我在项目中给按钮设置一个渐变属性,调试的时候有时候有效果,有时候又没有,代码如下: .training-right-bmz { background: -webkit-linear-gr ...