使用absolute布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.top {
width: 100%;
height: 40px;
background: #000;
color:#fff;
position:absolute;
top:0;
/*以上设置是重点必须的*/
text-align:center;
line-height:40px;
}
.bottom{
width:100%;
height:40px;
background:#000;
color:#fff;
position:absolute;
bottom:0;
/*以上设置是重点必须的*/
text-align:center;
line-height:40px;
}
.mainBox{
width:100%;
position:absolute;
top:40px;
bottom:40px;
/*以上设置是重点必须的*/
}
.mainBox .leftBox{
height:100%;
width:200px;
float:left;
margin-bottom:40px;
overflow: auto;
/*以上设置是重点必须的*/
border:6px solid green;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
line-height:40px;
}
.mainBox .rightBox{
height:100%;
margin-left:220px;
/*以上设置是重点必须的*/
border:6px solid crimson;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: auto;
text-align:center;
line-height:40px;
}
.left1{
background-color: #0088cc;
width: 100%;
height: 60%;
}
.left2{
background-color: #CCCCCC;
width: 100%;
height: 40%;
}
</style>
</head>
<body>
<div class="top">顶部，高度40px</div>
<div class="mainBox">
<div class="leftBox"><!--左盒子，固定宽度200px，高度自适应铺满屏幕剩余高度-->
<div class="left1"></div>
<div class="left2"></div>
</div>
<div class="rightBox">右盒子，距离左盒子20px，高度自适应宽度自适应铺满屏幕剩余高度</div>
</div>
<div class="bottom">底部，高度40px</div>
</body>
</html>
使用absolute布局的更多相关文章
- margin+absolute布局：右栏固定主内容自适应 demo
margin+absolute布局:右栏固定主内容自适应 demo 头部 Aside侧边栏区域 Main主内容区域 底部 #demo{width:80%;margin:auto;height:300p ...
- 一种移动端position:absolute布局：
一种移动端position:absolute布局: 1.他父级不需要加上 position:relative; 如果父级不是不是body,则加position:absolute; 2.红色加量部分 ...
- absolute布局和css布局释疑
jqueryui也不是万能的, 有时候, 也需要自己写一些, 由 css 和jquery结合的一些东西, 如: banner中, 依次播放的div等 ## 关于jquery设计的一些思想和理念?but ...
- ExtJS 布局-Absolute布局（Absolute layout）
更新记录: 2022年5月31日 发布本篇 1.说明 使用xy配置项设置子组件在父容器中绝对位置,本质是将子组件的CSS的position设置为absolute,然后使用x和y配置项映射到CSS的to ...
- absolute布局的替代实现
京东商城首页标价定位 小横条首页导航的下拉 1.京东商城首页标价定位 .p-img{ height: 130px;} .p-price{ margin:-28px 0 0 74px;} .price{ ...
- 用absolute进行页面的自适应布局
用position:absolute和top,left,bottom,right进行设置可以进行页面的头部,底部,左边框,内容的自适应布局,可以代替position:fixed; <!DOCTY ...
- HTML中的布局方式：absolute、relative、fixed、static
在CSS中关于定位的内容是: position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z- ...
- 网页布局的应用（float或absolute）
一个浮动(左浮动或右浮动) 垂直环绕布局(float.clear) 左右两列布局(float.absolute) 三栏网页宽度自适应布局(float.absolute) 注意:网页设计中应该尽量避免使 ...
- ExtJs布局详解
序言 1.百度百科上说:ExtJs功能丰富,无人能出其右.无论是界面之美,还是功能之强,extjs都高居榜首. 2.呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局.(extjs是4 ...
随机推荐
- uniGUI试用笔记（十一）
最近研究了一下UniGUI的TuniDBGrid,记录一下免得忘记了. TuniDBGrid的重要属性包括: 1.列—TUniDBGridColumns和TUniDBGridColumn 每个列对象( ...
- Bootstrap3基础 form-group 输入框之间出现间隔
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- Docker 使用Dockerfile构建tomcat镜像
Dockerfile概念: 镜像的定制实际上就是定制每一层所添加的配置.文件.如果我们可以把每一层修改.安装.构建.操作的命令都写入一个脚本,用这个脚本来构建.定制镜像,那么之前提及的无法重复的问题. ...
- Why there is two completely different version of Reverse for List and IEnumerable?
https://stackoverflow.com/questions/12390971/why-there-is-two-completely-different-version-of-revers ...
- windows下使用LibreOffice的体验
我在家里一般是使用Ubuntu,学校这个网络需要e信拨号,还是只能用Windows主用,以前我在Ubuntu一直使用的是LibreOffice,这次看见学校电脑很乱了就重装了系统,MSOffice真的 ...
- sql 指定数据库中的信息操作
查是否有该表名 SELECT * FROM sys.objects WHERE name='表名'查表字段的信息select * from syscolumns where id=Object_Id( ...
- Docker：Deploy your app
Prerequisites Install Docker. Get Docker Compose as described in Part 3 prerequisites. Get Docker Ma ...
- HDU 4302 Holedox Eating（multiset）
http://acm.hdu.edu.cn/showproblem.php?pid=4302 题意: 在一条直线上,会有多条命令,如果是0,那么就会在x位置处出现一个蛋糕,如果是1,某人就会找到最近的 ...
- 如何用R来定制个性化PPT
ReporteRs包可以创建word,ppt,html文档.它可以格式化R的输出:如可编辑的矢量图,复杂的表格报告功能,企业模板文档的重用(.docx和.pptx).它是一个很好的自动化报告工具,并且 ...
- sql 查询字段是中文/英文/数字 正则表达式
一.包含中文字符 select * from 表名 where 列名 like '%[吖-座]%' 二.包含英文字符 select * from 表名 where 列名 like '%[a-z]%' ...