常用自适应样式 CSS 布局

最新推荐文章于 2023-07-25 16:42:58 发布

___NULL

最新推荐文章于 2023-07-25 16:42:58 发布

阅读量3.4k

点赞数 2

分类专栏：所有 Web前端

本文链接：https://blog.csdn.net/joyous/article/details/70198434

版权

所有同时被 2 个专栏收录

219 篇文章 2 订阅

订阅专栏

Web前端

69 篇文章 0 订阅

订阅专栏

常用自适应样式 CSS 布局，一个简单的样式布局，可自适应窗口大小缩放。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
html, body {
	overflow: hidden; background-color: #fff;
}

.title {
	position: absolute; left: 0; width: 100%; top: 0; height: 70px; background-color: #FFC107;
}

.left {
	position: absolute; left: 0; width: 200px; top: 70px; bottom: 90px; overflow: auto; background-color: #ff0000;
}

.main {
	position: absolute; left: 200px; right: 0; top: 70px; bottom: 90px; overflow: auto; background-color: #00ff00;
}

.bottom {
	position: absolute; left: 0; width: 100%; height: 90px; bottom: 0; background-color: #0F00F0;
}
</style>
</head>
<body>
	<div class="title">
		title 高度保持 宽度自动
	</div>
	<div class="left">left 宽度保持 </div>
	<div class="main">main 宽度自动 </div>
	<div class="bottom">bottom</div>
</body>
</html>

布局效果

其他相关文章：
nec.netease.com/library/141027
www.divcss5.com/css-jiaocheng/

___NULL

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
常用自适应样式 CSS 布局

常用自适应样式 CSS 布局，一个简单的样式布局，可自适应窗口大小缩放。Insert title herehtml, body { overflow: hidden; background-color: #fff;}.title { position: absolute; left: 0; width: 100%; top: 0; height: 70px; background-color: #FFC107;}
复制链接

扫一扫