css Position 上下左中右布局
2024-08-27 03:21:06
<!DOCTYPE html>
<html lang="zh-CN"> <head> <meta charset="utf-8">
<title>position</title>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
} .container {
position: relative;
width: 100%;
height: 100%;
background: #FFF0F5;
} .header {
width: 100%;
height: 100px;
line-height: 100px;
position: absolute;
background-color: #FFDAB9;
} .footer {
width: 100%;
height: 100px;
line-height: 100px;
position: absolute;
bottom: 0px;
background-color: #FFFACD;
} .left {
top: 100px;
bottom: 100px;
background-color: #20B2AA;
width: 100px;
position: absolute;
overflow: auto;
} .middle {
top: 100px;
left: 100px;
bottom: 100px;
right: 200px;
background-color: #F0E68C;
position: absolute;
overflow: auto;
} .right {
top: 100px;
right: 0px;
background-color: #708090;
overflow: auto;
position: absolute;
bottom: 100px;
width: 200px;
}
</style>
</head> <body>
<div class="container">
<div class="header">这是顶部</div>
<div class="left" id="left_content">
<script>
for (var i = 1; i <= 500; i++) {
document.getElementById("left_content").innerHTML = document.getElementById("left_content").innerHTML + i.toString() + "<br/>";
}
</script>
</div>
<div class="middle" id="middle_content">
<script>
for (var i = 1; i <= 500; i++) {
document.getElementById("middle_content").innerHTML = document.getElementById("middle_content").innerHTML + (i * 10).toString() + "<br/>";
}
</script>
</div>
<div class="right" id="right_content">
<script>
for (var i = 1; i <= 500; i++) {
document.getElementById("right_content").innerHTML = document.getElementById("right_content").innerHTML + (i * 100).toString() + "<br/>";
}
</script>
</div>
<div class="footer">这是底部</div>
</div> </body> </html>
最新文章
- [No0000AC]全局鼠标键盘模拟器
- StringTemplate初步使用
- python - socket - connection
- .gitignore的多级目录配置
- linux下RDP客户端及服务器
- Skyfree的毕业论文 《系统封装与部署的深入研究》
- 解决 SQL Server Profiler 跟踪[不断]出现检索数据
- Android笔记——导入Github开源项目CircleRefreshLayout
- Hanoi塔问题
- Unity给力插件之LittleLocalization
- 搭建windows环境下(nginx+mysql+php)开发环境
- 基于 Koa平台Node.js开发的KoaHub.js的控制器，模型，帮助方法自动加载
- MySQL命令（逐步更新ing）
- 【网摘】C#中TransactionScope的使用方法和原理
- this应用详解-js原生
- setTimeout与Promise的区别
- python windows安装 SQLServer pymssql,
- linux系统下pdf操作软件pdftk
- 运行时常量池中的符号引用/String.intern() /ldc指令
- [T-ARA][너 때문에 미쳐][因为你而疯了]