文档章节

上左右结构页面通过CSS控制顶部高度固定下内内容自适应

O龙猫O
 O龙猫O
发布于 2016/06/06 10:51
字数 274
阅读 52
收藏 2
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>默认上左右的结构</title>
<style type="text/css">
/*通用默认设置*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-family: sans-serif;
	font-family: 微软雅黑, 宋体, "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 14px;
	overflow: auto;
}

body {
	margin: 0;
	line-height: 1.42857143;
	color: #333;
	background-color: #fff;
}

/*自定设置*/
body {
	background-color: #725E82;
}

.tlbrc-top {
	background-color: #3D3B4F;
	height: 70px;
}

.tlbrc-left {
	background-color: #50616D;
	top: 70px;
	width: 25%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	overflow: auto;
	overflow-x: hidden;
}

.tlbrc-right {
	background-color: #493131;
	top: 70px;
	left: 25%; position : absolute; right : 0px;
	bottom: 0px;
	overflow: auto;
	overflow-x: hidden;
	right: 0px;
	position: absolute;
}

.tlbrc-right iframe {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	right: 0px;
	border:none;
}
</style>
</head>
<body>
	<div class="tlbrc-top"></div>
	<div class="tlbrc-left"></div>
	<div class="tlbrc-right">
		<iframe src="http://www.baidu.com"></iframe>
	</div>
</body>
</html>

简单的来说,通过设置与父容器的边距,通过自动拉伸到。

© 著作权归作者所有

O龙猫O
粉丝 113
博文 39
码字总数 21143
作品 1
苏州
部门经理
私信 提问
css布局 - 常规上中下分左右布局的一百种实现方法

一、 上中下左固定 - fixed+margin 概括:如图,此种布局就是顶部、底部和左侧固定不动,只有中间右侧超出可滚动。 html: 1 1 2 关键点: 上下部分就是普通处理,fixed固定布局 position: ...

Eddie_yang
2018/11/15
143
0
border属性的多方位应用和实现自适应三角形

属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标...

深海鱼在掘金
2018/10/30
0
0
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0
让footer固定在页面(视口)底部

让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧。由HTML和CSS实现,没有令人讨厌的hacks。所以这就能在...

思考中
09/29
0
0
CSS完美兼容IE6/IE7/FF的通用方法

CSS完美兼容IE6/IE7/FF的通用方法 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1、 !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明...

羊皮卷
2018/08/08
99
2

没有更多内容

加载失败,请刷新页面

加载更多

zk中选举Leader时的网络IO QuorumCnxManager解析

每台服务启动过程中,会启动一个QuorumCnxManager,负责各台服务器之间底层Leader选举过程中的网络通信 当集群中有服务器服务中断时,zk会重新选举leader 内部类 Message定义消息结构 包含了...

writeademo
25分钟前
2
0
使用mdBook 替代 gitbook。

为什么要替代gitbook gitbook 有个模板问题:如果md文件中有连续的大括号(比如:&{{父亲 40}}),gitbook会把{{ 父亲 40 }}中的父亲 40当做一个模板变量。如果这个变量不存在,会报错 Temp...

王坤charlie
28分钟前
3
0
TL-A7HSAD采集卡硬件的处理器、NOR FLASH、DDR3

TL-A7HSAD是一款由广州创龙基于Xilinx Artix-7系列FPGA自主研发的高速数据采集卡,可配套广州创龙TMS320C6655、TMS320C6657、TMS320C6678开发板使用。该采集卡包含1个双通道250MSPS*12Bit的高...

Tronlong创龙
40分钟前
3
0
项目启动报fastjson版本可能过低

进行项目启动的过程中,之前都正常,这次启动突然就失败了: 查看日志说的是版本过低,后来查看官方网站版本,替换了最新版本: 选择了最新版本的1.2.60,1.2.62尝试后都不行,后来查看网上搜...

aiChuang
40分钟前
3
0
McDonald’s is using Alexa and Google to accepting job applications

McDonald’s today announced a new initiative the fast food chain is calling the “Apply Thru,” in which owners of Amazon Alexa or Google Assistant devices can begin job applic......

wowloop
44分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部