使用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 ...
随机推荐
- 待续未完- 自己写后台内容管理程序 - 用tp框架 和 前台 jquery ui等写的
在日常开发中,我们主要使用的还是 php 的 内部的 语言本身提供的函数/常量,系统内部数组等. 为了和后面的tp框架提供的 "系统函数.系统常量"相区别,把php提供的东西叫语言 ...
- EXCEL 基本函数
案例2:修改非法日期 TODAY(),显示今天日期,数据格式是日期,如果是常规,就是数字. EXCEL 起始日期,1900/1/1是第一天 日期输入方式要正确 时间数据格式 1:00:00 = 1 ...
- leetcode 04 Median of Two Sorted Arrays
n1 为 num1的 len n2 为 num2的 len 故中间的数应该是 k = (n1 + n2 + 1) / 2 二分 num1中位置 m1 , 故 num2的位置为m2 必须保证 nums1 ...
- centos 查看USB接口的版本
# lsusbBus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hubBus 002 Device 001: ID 1d6b:000 ...
- Deep Reinforcement Learning for Visual Object Tracking in Videos 论文笔记
Deep Reinforcement Learning for Visual Object Tracking in Videos 论文笔记 arXiv 摘要:本文提出了一种 DRL 算法进行单目标跟踪 ...
- spring与mybatis四种整合方法
转载: 1.采用数据映射器(MapperFactoryBean)的方式,不用写mybatis映射文件,采用注解方式提供相应的sql语句和输入参数. (1)Spring配置文件: <!-- 引 ...
- Jenkins-job迁移
摘自:http://www.cnblogs.com/topplay/p/3899330.html Jenkins迁移job 说明:从一个Jenkins服务器A将现有job迁移到另外一个Jenkins服 ...
- python bytes类型
python3中二进制数据则由bytes类型表示,8位一字节 格式化打印文件的二进制编码 with open('spiderman.mkv', "rb") as f: print( ...
- ARM MOV PC加8
缘由 今天在分析ARM伪指令ADR,书上说ADR通常会被一条ADD或SUB指令替代实现相同功能.我反汇编了一下确实如此会基于PC相对偏移的地址量读取到寄存器中,可是计算却发现对不上 如上图所示,ADR ...
- Sublime Text3 插件：DocBlockr与javascript注释规范
原:http://www.ithao123.cn/content-719950.html 1.引子 在写代码的时候,尤其是写脚本,最需要注释了.目前脚本.样式的注释格式都有一个已经成文的约定规范(这些 ...