<!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 上下左中右布局的更多相关文章

  1. android RelativeLayout实现左中右布局

    RelativeLayout实现左中右布局   <RelativeLayout android:layout_width="match_parent" android:lay ...

  2. CSS左中右布局，规范案例

    html部分 <body> <form id="form1" runat="server"> <div id="wrap ...

  3. RelativeLayout实现左中右布局

    <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_co ...

  4. 典型的DIV＋CSS布局——左中右版式

    [效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Def ...

  5. css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等

    1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...

  6. CSS使用position:sticky 实现粘性布局

    简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...

  7. 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。

    前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...

  8. CSS系列，三栏布局的四种方法

    三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...

  9. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

随机推荐

  1. 《DSP using MATLAB》Problem 8.21

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  2. 关于slf4j和log4j冲突问题（自己项目配置文件不生效）

    用-Dlog4j.debug可以打印出配置log4j的配置文件加载的信息 mvn dependency:tree 看依赖信息 然后排除掉重复得依赖 <dependencies> <d ...

  3. [转]Visual Studio 2010生成解决方案时，提示磁盘空间不足！

    最近几天,使用VS调试时总是出现提示:磁盘空间不足.我觉得可能有两种可能:    1.系统盘已被木马侵袭.历时4小时的全盘扫描没有病毒提示,只好删除了一些不必要的软件:    2.使用VS2010调试 ...

  4. wpf listbox touch 整个窗口移动

    工作中遇到遇到,在有listbox中的地方,touch listbox的时候  可以把整个窗体都移动了,解决方案如下: /// <summary> /// prevent the rubb ...

  5. C语言处理字符串及内存操作

    字符串处理函数 1.字符串长度 strlen表示包含的字符的个数,size_t strlen(char cosnt *string), 返回的是size_t类型,它是无符号整数类型,在表达式中进行运算 ...

  6. Python pylint的安装和使用

    Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准和有潜在问题的代码. Pylint 是一个 Python 工具,除了平常代码分析工具的作用之 ...

  7. Django项目：CMDB(服务器硬件资产自动采集系统)--06--06CMDB测试Linux系统采集硬件数据的命令01

    #base.py # ————————01CMDB获取服务器基本信息———————— from config import settings #配置文件 class BasePlugin(object ...

  8. [转]js模块化——AMD及require.js

    由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引.AMD规范就是其中比较著名一个,全称是Asynchronous Module Definitio ...

  9. C#可扩展编程之MEF（三）：导出类的方法和属性

      前面说完了导入和导出的几种方法,如果大家细心的话会注意到前面我们导出的都是类,那么方法和属性能不能导出呢???答案是肯定的,下面就来说下MEF是如何导出方法和属性的. 还是前面的代码,第二篇中已经 ...

  10. tinyproxy 反向代理无法上网原因

      今天参照网上教程在服务器安装并配置了tinyproxy反向代理,此次安装反向代理的目的主要是通过内网连接上服务器,再使用服务器作为中转站进行上网.安装并启动的主要步骤如下 下载并安装tinypro ...