布局：上下两个div高度固定，中间自适应
需求：经典布局 —— 头尾固定高度中间高度自适应布局
头部固定高度，宽度100%自适应父容器；
底部固定高度，宽度100%自适应父容器；
中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；
整个内容填满浏览器可视区域，并且不超出此区域！
方法一：position:absolute定位，不设高，并改变"包含块"的尺寸渲染
固定头尾，所以，至少头和尾要用到position定位。因为浏览器大小是可以调节的，而且不同尺寸，不同分辨率的浏览器可视区域的高度是不固定的，
这就决定是中间主体部分的高度不固定。所以真正的问题核心也正在此。解决了这个问题，整个布局也就解决了一多半
最重要的一段就是中间部分绝对定位，top为头的高度，bottom为尾的高度
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>头尾固定中间高度自适应布局</title>
<style>
html, body {
height:100%;
margin:0;
padding:0
}
#dHead {
height:100px;
background:#690;
width:100%;
position:absolute;
z-index:5;
top:0;
}
#dBody {
background:#FC0;
width:100%;
overflow:auto;
position:absolute;
z-index:10;
top:100px;
bottom:100px;
}
.mycontent {
padding:20px;
}
#dFoot {
height:100px;
background:#690;
width:100%;
position:absolute;
z-index:200;
bottom:0;
}
</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>
效果如下：
经测试：IE7+、firefox、chrome、safari、opera均通过测试！
方法二：利用boxsizing改变盒子模型
实现原理是，先为html设定box-sizing然后，加上上下padding值。布局模块均采用position:relative定位。
然后，头部采用负向margin向上平移（因为有了html padding），如查采用负top的话需要为每个布局版加上负top;看实现代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>头尾固定中间高度自适应布局</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:100px 0;
overflow:hidden;
}
html, body {
height:100%;
}
.top {
position:relative;
top:-100px;
height:100px;
background:#f60;
}
.side {
top:-100px;
position:relative;
height:100%;
background:#fc0;
overflow:auto;
width:200px;
float:left;
margin-right:0 !important;
margin-right:-3px;
overflow:auto;
}
.main {
top:-100px;
position:relative;
overflow:auto;
height:100%;
background:#f30;
}
.bottom {
top:-100px;
position:relative;
height:100px;
background:#f60;
clear:both;
}
</style>
</head>
<body>
<div class="top"> top </div>
<div class="side"> side <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 />
<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 class="main"> main <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 />
<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 class="bottom"> bottom </div>
</body>
</html>
效果如下：
此IE6/IE7是不支持的，另外如果给头部是absolute定位的话也是可以实现的
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:100px 0;
overflow:hidden;
}
html, body {
height:100%;
}
.top {
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
background:#f60;
}
.side {
height:100%;
background:#fc0;
width:200px;
float:left;
margin-right:0 !important;
margin-right:-3px;
overflow:auto;
}
.main {
overflow:auto;
height:100%;
background:#f30;
}
.bottom {
position:relative;
height:100px;
background:#f60;
clear:both;
}
</style>
</head>
<body>
<div class="top"> top </div>
<div class="side">
side
<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 />
<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 class="main">
main
<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 />
<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 class="bottom"> bottom </div>
</body>
</html>
布局：上下两个div高度固定，中间自适应的更多相关文章
- DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- Flex 布局 （两个div居中自适应 宽度变小变一列，宽度够就是两列）
https://www.runoob.com/w3cnote/flex-grammar.html display: flex; justify-content: center; align-items ...
- css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...
- 解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题
/*左侧div*/ .left-div{width: 220px;height: 100%;position: fixed;background: #FFFFFF;} /*右侧div*/ .right ...
- Header 与 Footer 的 DIV 高度固定， 中间内容 DIV高度自适应，内容不满一页时，默认填满屏幕。
一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...
- 【css面试题】三个DIV要求水平对齐，左右两个DIV宽度固定为100px，中间那个DIV充满剩余的宽度（至少2种方法）
这是我在一家公司面试时遇到的问题,当时没有答上来!! 所以看到的小伙伴一定要注意了!! 变化浏览器宽度可看到效果: 左 右 中 然后我们来看看代码: 第一种方法:(浮动) <style type ...
- 一个宽度不确定的DIV里放三个水平对齐的DIV，左右两个DIV宽度固定为100px，中间那个DIV自适应宽度
方法一:浮动 注意三个div的位置 <html><head> <meta charset="utf-8"> <style type=&q ...
- 《转》div 中间固定 左右自适应实现
<转自>:http://www.w3cplus.com/css/layout-column-three 对于我来说,这是一种很少碰到的布局方法,不知道大家有何体会,那么下面我们一起来看这种 ...
- div高度不能自适应（子级使用float浮动，父级div高度不能自适应）
1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...
随机推荐
- Docker学习链接
Docker安装篇 1>.Windows Docker 安装
- 学习Memcached:2基本应用之控制台使用
1.首先新建一个控制台应用. 2.将下载好需要引用的Memcached的Dll导入进来. 3.前期准备工作就结束了,其实很简单,memcache的配置使用是挺简单.下面就是写代码了. using Me ...
- 数据结构与算法--最短路径之Dijkstra算法
数据结构与算法--最短路径之Dijkstra算法 加权图中,我们很可能关心这样一个问题:从一个顶点到另一个顶点成本最小的路径.比如从成都到北京,途中还有好多城市,如何规划路线,能使总路程最小:或者我们 ...
- Idea无法运行Maven项目
导入项目到tomcat的时候要选择Arifact 如果maven项目没有这个选项, <groupId>com.bihang</groupId> <artifactId&g ...
- python学习之老男孩python全栈第九期_day008作业
1. 文件a.txt内容:每一行内容分别为商品名字,价钱,个数,求出本次购物花费的总钱数apple 10 3tesla 100000 1mac 3000 2lenovo 30000 3chicken ...
- django使用小贴士
问题一: RuntimeError: Model class user.models.UserAccount doesn't declare an explicit app_label 解决方案 方案 ...
- Javascript 随机数函数 学习之一：产生服从均匀分布随机数
大家都知道Math.random是 javascript 中返回伪随机数的函数,但查看 MDN, The Math.random() function returns a floating-point ...
- CentOS7安装mongodb
1.下载mongodb的*.tar.gz安装包 2.移到centos7中并解压 tar -xzvf mongodb.tar.gz 3.配置环境变量 vim /etc/profile 添加如下内容: # ...
- Intellij Idea出现 unable to establish loopback connection
项目一运行就出现这个情况,好几次了,最后发现只要防火墙关闭,项目就可以运行成功.错误提示:“C:\Program Files\Java\jdk1.8.020\bin\java” -Xmx700m -D ...
- 如何获取listview里面的edittext或者RadioGroup的值，涉及到引发的混乱现象
最近要实现从数据库读数据,该数据对应listview的item布局里面的RadioButton值,并且item布局里面还有EditText的控件. 如何将每一条对应的listview对应值获取出来呢? ...