布局：上下两个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高度却不 ...
随机推荐
- [转](SQL Server) Convert a File from utf-8 to ANSI (such as Windows-1252)
本文转自:https://example-code.com/sql/charset_convert_file_from_utf8_to_ansi.asp CREATE PROCEDURE Chilka ...
- Spring基础(9) ： 自动扫描
一 配置xml方式:扫描com包下的bean <?xml version="1.0" encoding="UTF-8" ?> <beans ...
- Windows程序
Windows程序是事件驱动的,对于一个窗口,它的大部分例行维护是由系统维护的.每个窗口都有一个消息处理函数.在消息处理函数中,对传入的消息进行处理.系统内还有它自己的缺省消息处理函数. 客户 ...
- docker 第一次学习（一）--安装以及相关命令
转自:https://www.jianshu.com/p/c69a2a3b4c7a https://docs.docker.com/ http://www.dockerinfo.net/documen ...
- 自己写一个java的mvc框架吧（三）
自己写一个mvc框架吧(三) 根据Method获取参数并转换参数类型 上一篇我们将url与Method的映射创建完毕,并成功的将映射关系创建起来了.这一篇我们将根据Method的入参参数名称.参数类型 ...
- docker 知识点汇总
目录 什么是 Docker Docker 简介 Docker 的特点 如何使用 Docker 镜像的常用操作 容器的常用操作 Docker 命令汇总 手工制作 java 镜像 使用 Dockerfil ...
- EF数据库优先模式(一)
C#中EF模式,讲述个人在做项目时用到的一些思路以及方法 EF数据模型有三种方式,database优先,model优先,Code优先,个人在做项目时用到的是database优先,以后再说其他的方式 d ...
- Spring Data Solr —— 快速入门
Solr是基于Lucene(全文检索引擎)开发,它是一个独立系统,运行在Tomcat或Jetty(solr6以上集成了jetty,无需再部署到servlet容器上),但其原生中文的分词词功能不行,需要 ...
- MySql处理函数
Lower(name) 转换为小写 Upper(name)转换为大写 Substr(name,length,index):从index开始截取length个字符串 Length(name) 获取长度 ...
- springboot No Java compiler available for configuration options compilerClassName: [null] and compil
今天使用eclipse创建springboot整合jsp出现一个问题,在idea中并没有遇到这个问题.最后发现是需要在eclipse中添加一个eclipse依赖,依赖如下: <dependenc ...