侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130555 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

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

2024-05-10 星期五 / 0 评论 / 0 点赞 / 7 阅读 / 1765 字

<!doctype html><html><head><meta name="viewport" content="width=device-width, initial-scale=1" /><me

<!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>

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

广告 广告

评论区