转载 html div三列布局占满全屏(左右两列定宽或者百分比、中间自动适应,div在父div中居底)
原文地址: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中居底)的更多相关文章
- 【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题
. 参考界面 : 携程app首页的广告栏, 使用ViewPager实现 自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...
- Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题
. 参考界面 : 携程app首页的广告栏, 使用ViewPager实现 自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...
- Unity打开摄像头占满全屏
Unity打开摄像头占满全屏 AR项目需求,Unity打开摄像头作为背景渲染占满全屏~ Unity对设备硬件操作的API并不是太友好~打开一个摄像头,渲染到屏幕上也都得自己写,虽然步骤少,提取摄像头t ...
- 关于 web 页面 占满全屏
页面一般可以分成三部分,头部,底部,中间内容部分. 一般不用考虑中间高度部分,因为可以靠内容撑开,然后让底部到达底部.但是当中间内容太少时,底部就会顶不到底部. 方法1.中间部分给一个最小高度(min ...
- 换了XCode版本之后,iOS应用启动时不占满全屏,上下有黑边
原因是没有Retina4对应的启动图片,解决方法很简单,就是把Retina4对应的图片给补上就只可以了
- html盒子铺满全屏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...
- React里单页面div自适应浏览器高度占满屏幕
可以用绝对定位方式,让div占满屏幕,css样式如下: height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px;
- 两列布局实现各自独立滚屏,类似与 scrollNav 的功能。
现在移动端 web 开发越来越靠近 app 的功能.所以两列布局各自都能实现独立滚动也常见.基于固定侧边栏导航,另一侧实现内容展示. 这个功能的核心在于使用 vh 单位. 其中 CSS 的代码是核心点 ...
随机推荐
- kali安装显卡驱动
由于我们使用cpu一般最多也就是4到16核,而一块不错的gpu可以多大上千核,在并行复杂运算能力上GPU的运算速度远远超过CPU的运算速度,所以很多场合比如暴力穷举破解,挖矿更多地使用GPU,所以有必 ...
- vs中更改项目名称注意事项
1,项目属性中的所有需要改的地方,还有程序集名称. 2,解决方案用记事本打开更改启动路径. 3,重新加载即可.
- 安卓下H5弹窗display:table的bug
表单以弹窗的形式弹出时,若设置了表单的div:display:table下,安卓打开页面输入法的时候,表单顶到屏幕顶部之后,再也无法上滑,键盘遮住了下面的输入框.在ios下,一切显示正常,因为iOS会 ...
- 可视化工具Navicat的使用
可视化工具Navicat的使用 掌握Navicat的基本使用 # PS:在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时,可以使用可视化工具Navicat,以图 ...
- random 模块 时间模块(time) sys模块 os模块
random 模块 1.随机小数 random.random() 0-1内的随机小数 random.uniform(1,5) 1-5范围内的随机小数 2.随机整数 random.randint( ...
- 三个<li>元素放一行
<ul><li style="float:left;display:inline;">0</li><li style="floa ...
- WLC5520无法通过无线客户端进行网管故障解决
客户反馈其办公环境中的WLC5520网管需要通过内部有线网络进行管理,通过无线客户端无法进行管理,远程协助其开启WLC5520的无线管理功能后故障解决.
- 微信小程序开发——打开另一个小程序
微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... &quo ...
- mysql 5.6 datetime 保存精确到秒
mysql中的CURRENT_TIMESTAMP和ON UPDATE CURRENT_TIMESTAMP 设置默认值 now(3) datetime 长度 3 保存精确到秒
- 通过docker-compose构建ghost博客(二)
上一篇通过yml文件构建 ghost博客,这次通过构建nginx服务,并添加反向代理来运行搭建的ghost博客. 目录结构 ghost.conf 就是 定义的nginx 加载的配置文件 server ...