布局：上下两个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高度却不 ...
随机推荐
- [转]本地 Windows 计算机密码登录 登录 腾讯云 Linux 实例
本文转自:https://cloud.tencent.com/document/product/213/5436? 登录工具 使用 远程登录软件 ,采用密码登录 Linux 实例(本例中选择使用 Pu ...
- [转]Easily Add a Ribbon into a WinForms Application
本文转自:https://www.codeproject.com/articles/364272/easily-add-a-ribbon-into-a-winforms-application-cs ...
- [c#] Html Agility Pack 解析HTML
摘要 在开发过程中,很有可能会遇到这样的情况,服务端返回的是html的内容,但需要在客户端显示纯文本内容,这时候就需要解析这些html,拿到里面的纯文本.达到这样的目的可以有很多途径,比如自己写正则表 ...
- REST风格的应用程序实现
莫笑我老土,因为我确实是最近才听说REST风格的,以前就是觉得 /category/product/pid 这样的地址非常的漂亮,但是那只是表象罢了,了解深入以后,发现必须有一个客户端的Ajax En ...
- 胜利大逃亡(续)hdu1429（bfs）
胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- Python selenium —— 父子、兄弟、相邻节点定位方式详解
今天跟大家分享下selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点. ...
- H5音乐播放器源码地址
源码获取 https://pan.baidu.com/s/1pR_bhIFFQWU6TK9ZvrRWIA 安卓安装包下载地址 https://pan.baidu.com/s/1Z8HF5LY ...
- Dynamics 365Online 使用adal.js注册和配置SimpleSPA应用程序
本篇是基于dynamics 365online撰写,本文中使用的365online及azure均为试用版,因为online在国内还没落地,所以我申请的是新加坡版,online的申请方式可见我之前的博文 ...
- Jenkins 为Jenkins添加Windows Slave远程执行python项目脚本
为Jenkins添加Windows Slave远程执行python项目脚本 by:授客 QQ:1033553122 测试环境 JAVA JDK 1.7.0_13 (jdk-7u13-windows ...
- Windows安装PostgreSQL数据库 无法初始化数据库问题
背景 由于项目的需要,使用PostgreSQL数据库,因此在Windows上安装PostgreSQL数据库.但是在安装后,无法访问本地数据库,这个时候查看/data目录,没有任何文件.而且安装过程中, ...