<!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. eclipse memory analyzer对系统内存溢出堆文件解析0（转）

    前言 在平时工作过程中,有时会遇到OutOfMemoryError,我们知道遇到Error一般表明程序存在着严重问题,可能是灾难性的.所以找出是什么原因造成OutOfMemoryError非常重要.现 ...

  2. Js获取或计算时间的相关操作

    //获取当前日期(年月日),如:2017-12-18 function getNowDate() { var dd = new Date(); var y = dd.getFullYear(); // ...

  3. 嘴巴题8 BZOJ2318: Spoj4060 game with probability Problem

    Time Limit: 1 Sec Memory Limit: 128 MB Submit: 555 Solved: 273 [Submit][Status][Discuss] Description ...

  4. Luogu P4932 浏览器(二进制)

    P4932 浏览器 题意 题目背景 __stdcall在用\(Edge\)玩\(slay\)的时候,鼠标会经常失灵,这让她十分痛苦,因此她决定也要让你们感受一下\(Edge\)制造的痛苦. 题目描述 ...

  5. 2.Spring【DI】XML方式

    依赖: 在A类中引用了B类,说明A依赖于B. 注入: 使用Spring框架给A类中的B对象的属性赋值. 直接上代码: 1.只使用IOC public class Person { private St ...

  6. python urllib模块中的方法

    1.urllib.urlopen(url[,data[,proxies]]) 打开一个url的方法,返回一个文件对象,然后可以进行类似文件对象的操作.本例试着打开google >>> ...

  7. Python之MySQL语法（增删改查）

    -- ID: 新闻的唯一标示 -- title: 新闻的标题 -- content: 新闻的内容 -- created_at: 新闻添加的时间 -- types: 新闻的类型 -- image: 新的 ...

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

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

  9. 在 Angularjs 中$state.go 如何传递参数

    在目标页面规定接受的参数: .state('app.AttendanceEditFixed', { url: '/AttendanceEditFixed', params: {'id': null,' ...

  10. compareTo)--list 根据某字段排序

    Collections.sort(actList, new Comparator<Act>() { @Override public int compare(Act o1, Act o2) ...