css Position 上下左中右布局
<!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>
css Position 上下左中右布局的更多相关文章
- android RelativeLayout实现左中右布局
RelativeLayout实现左中右布局 <RelativeLayout android:layout_width="match_parent" android:lay ...
- CSS左中右布局，规范案例
html部分 <body> <form id="form1" runat="server"> <div id="wrap ...
- RelativeLayout实现左中右布局
<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_co ...
- 典型的DIV＋CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Def ...
- css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等
1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...
- CSS使用position:sticky 实现粘性布局
简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...
- 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
- CSS系列，三栏布局的四种方法
三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
随机推荐
- Python网络爬虫之三种数据解析方式 (xpath, 正则, bs4)
引入 回顾requests实现数据爬取的流程 指定url 基于requests模块发起请求 获取响应对象中的数据 进行持久化存储 其实,在上述流程中还需要较为重要的一步,就是在持久化存储之前需要进行指 ...
- mybatis-环境配置-基本案例-和hibernate区别
Mybatis第一天 1. Mybatis介绍 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了goo ...
- kafka comsumer
kafka的顺序消费只保证在同一个partition中而已
- PKU 百练OJ Arbitrage
http://bailian.openjudge.cn/practice/2240/ #include <iostream> #include <string> #includ ...
- 2019-4-16-C#-使用反射获取私有属性的方法
title author date CreateTime categories C# 使用反射获取私有属性的方法 lindexi 2019-4-16 10:13:3 +0800 2018-09-26 ...
- 常见的5个runtime exception
NullPointException(空指针异常),ArrIndexOutOfBoundsException(数组越界异常),ClassCastException(类型转换异常),ClassNotFo ...
- SQL有意思的面试题
1.中软国际 SQL行转列 变成 --数据准备create table t_test( year int, month int, sale int, primary key (year, mon ...
- LRU Cache数据结构简介
什么是LRU Cache LRU是Least Recently Used的缩写,意思是最近最少使用,它是一种Cache替换算法. 什么是Cache?狭义的Cache指的是位于CPU和主存间的快速RAM ...
- apt-get正在等待报头(waiting for headers)
可能的解决方法 1. 删除/var/cache/apt/archives/下的所有文件.可能是上次没有成功导致遗留了部分文件. 2. 如果使用的是代理,需要检查DNS.如果机器不能连接DNS服务器,要 ...
- Git同平台下多个账号配置
在公司要使用公司和自己的两个账号都往GitHub上面提交,所以整理成笔记 具体配置项 StrictHostKeyChecking no UserKnownHostsFile /dev/null # 为 ...