原文地址:http://blog.csdn.net/duyelang/article/details/20558899

<p><!DOCTYPE html>
<html xmlns="<a target="_blank" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body, html {
margin: 0px;
}
#header {
background: blue;
height: 100px;
width: 100%;
position: relative; /*父div的位置设置成相对的*/
top: 0;
}
#header #h_menu {
position:absolute;
bottom:0;
background:yellow;
width:100%;
height:50px;
}
#middle {
position:absolute;
width:100%;
height:auto;
top: 100px;
bottom:50px;
}
.left {
width: 15%; /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/
background: red;
float: left;
height:100%;
}
.right {
width: 15%; /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/
height: 100%;
background: pink;
float: right;
}
.center {
height: 100%;
background: green;
/*两种方式均可（一）margin(二)margin-left、margin-right*/
/*（一）、用这种方式上面的left和right中的width是百分比或者像素值都可以*/
margin: auto;
/*(二)、这里是百分比或者像素值，对应上面的left、right中的width就是百分比或者像素值*/
/*margin-left:15%;
margin-right:15%;*/
}
#footer {
background: blue;
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">
上
<div id="h_menu">
上_底
</div>
</div>
<div id="middle">
<div class="left">
中左
</div>
<div class="right">
中右
</div>
<div class="center">
中间
</div>
</div>
<div id="footer">
下
</div>
</div>
</form>
</body>
</html>
</p>

转载 html div三列布局占满全屏（左右两列定宽或者百分比、中间自动适应，div在父div中居底）的更多相关文章

  1. 【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

    . 参考界面 : 携程app首页的广告栏, 使用ViewPager实现        自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...

  2. Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

    . 参考界面 : 携程app首页的广告栏, 使用ViewPager实现        自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...

  3. Unity打开摄像头占满全屏

    Unity打开摄像头占满全屏 AR项目需求,Unity打开摄像头作为背景渲染占满全屏~ Unity对设备硬件操作的API并不是太友好~打开一个摄像头,渲染到屏幕上也都得自己写,虽然步骤少,提取摄像头t ...

  4. 关于 web 页面 占满全屏

    页面一般可以分成三部分,头部,底部,中间内容部分. 一般不用考虑中间高度部分,因为可以靠内容撑开,然后让底部到达底部.但是当中间内容太少时,底部就会顶不到底部. 方法1.中间部分给一个最小高度(min ...

  5. 换了XCode版本之后，iOS应用启动时不占满全屏，上下有黑边

    原因是没有Retina4对应的启动图片,解决方法很简单,就是把Retina4对应的图片给补上就只可以了

  6. html盒子铺满全屏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

  8. React里单页面div自适应浏览器高度占满屏幕

    可以用绝对定位方式,让div占满屏幕,css样式如下: height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px;

  9. 两列布局实现各自独立滚屏，类似与 scrollNav 的功能。

    现在移动端 web 开发越来越靠近 app 的功能.所以两列布局各自都能实现独立滚动也常见.基于固定侧边栏导航,另一侧实现内容展示. 这个功能的核心在于使用 vh 单位. 其中 CSS 的代码是核心点 ...

随机推荐

  1. sublime text3的注册码以及常用方法

    Michael BarnesSingle User LicenseEA7E-8213858A353C41 872A0D5C DF9B2950 AFF6F667C458EA6D 8EA3C286 98D ...

  2. DB2 57016报错的解决办法（表状态不正常，导致表无法操作）

    新建了一张表,删除了一列,然后执行insert的时候,报错 57016,解释为:因为表不活动. 1.执行db2 "load query table <tabname>" ...

  3. 八、AbstractFactory 抽象工厂模式

    设计原理: 代码清单: 抽象 Factory : public abstract class Factory { public static Factory getFactory(String cla ...

  4. lucene笔记

    lucene全文检索 全文检索是计算机程序通过扫描文章中的每一个词, 对每一个词建立一个索引, 指明该词在文章中出现的次数和位置. 当用户查询时根据建立的索引查找,类似于通过字典的检索字表查字的过程

  5. 手机端用swiper组件 轮播图设置后右侧出现空白 及 部分手机浏览器打开网页空白

    我的方法是设置内容css overflow:hidden;width:100%; ok. 之前搜到一个方法也可以,就是设置css height: auto;overflow-y: scroll; 但是 ...

  6. NYOJ_矩形嵌套(DAG上的最长路 + 经典dp)

    本题大意:给定多个矩形的长和宽,让你判断最多能有几个矩形可以嵌套在一起,嵌套的条件为长和宽分别都小于另一个矩形的长和宽. 本题思路:其实这道题和之前做过的一道模版题数字三角形很相似,大体思路都一致,这 ...

  7. js replaceAll全部替换

    js不支持replaceAll,可以用函数new RegExp('要替换的内容','g')代替, 代码: str.replace(new RegExp('要替换的内容','g'),"替换内容 ...

  8. linux 备忘录

    1. ps aux|grep 程序 -------->查看当前程序是否运行 ps aux|grep nginx 2. tar -zxvf 压缩包 ---------> 解压缩 tar -z ...

  9. c# usercontrol 用户自定义控件无法显示在工具箱的解决办法

    由于最开始x86平台,后来换成anyCPU 重新编译也没有删除x86目录下的dll ,也没重新生成 费x86 下的dll , 导致工具箱无法找到目录下的dll 无法加载自定义控件 右击工具栏中的内容选 ...

  10. (转)EasyUI 分页总结

      最近用到了easyui的分页和搜索栏功能,使用过程中由于运用不熟练导致其间也出现过一些问题,下面做个小结,供大家共同学习.1.首先使用EasyUI 的DataGrid分页,得加载其js类库:< ...