使用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试用笔记（十）
今天用LoadRunner对uniGUI的Standalone模式的程序进行了一次压力测试,程序采用三层模式,将应用服务器与Web服务器分离,由于条件限制,数据库.应用服务和Web服务都部署在同一条云 ...
- FireMonkey 源码学习（1）
FireMonkey采用了与VCL不同的机制,很多基础类已经重新编写了,好在一如既往地提供了源代码,故此有机会学习一下. 一.图形引擎 FireMonkey采用了纯图形化技术解决可视化控件,而不是使用 ...
- Linux电源管理_autosleep－－（五）【转】
本文转载自:https://blog.csdn.net/wlsfling/article/details/46005409 1. 前言 Autosleep也是从Android wakelocks补丁集 ...
- vi如何设置自动缩进?
答: tab 空格数设置为4,加入以下五行到~/.vimrc即可 set smartindent set tabstop= set shiftwidth= set expandtab set sof ...
- resure挽救笔记本系统和一些相关的操作记录
使用fedora23很久了, 但是感觉不是很流畅, 出现了一些不太稳定的体验, 所以想改到centos7. 因为centos7的很多东西 跟 fedora23 很相近了. 所以应该是无缝过渡 是选择3 ...
- win32汇编(ASM)学习资源
网站 AoGo汇编小站(MASMPlus作者) Win32Asm教程在线版 Win32Asm教程博客园文件备份版 Masm32补充教程系列 Win32 ASM Tutorial Resource Ki ...
- （转）Understanding, generalisation, and transfer learning in deep neural networks
Understanding, generalisation, and transfer learning in deep neural networks FEBRUARY 27, 2017 Thi ...
- E:Could not get lock /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)
出现这个问题的原因可能是有另外一个程序正在运行,导致资源被锁不可用.而导致资源被锁的原因,可能是上次安装时没正常完成,而导致出现此状况. 解决方法:输入以下命令 sudo rm /var/cache/ ...
- HTTP 返回状态码说明
HTTP 返回状态码一.1xx - 信息提示 这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个 1xx 响应. • 100 - 继续. • 101 - 切换协议. 二.2xx ...
- ifconfig 输出里没有IP地址
转载: http://blog.csdn.net/johnstrive/article/details/5625121 inet addr:....Bcast:.....Mask:255.255.25 ...