<!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. 第一周——clone项目到本地

    公司使用的是git进行version control,代码托管在gitlab. 按照公司规范注册了gitlab账号, 漫长的等待clone到本地~ 然而,还是有问题,jar包下载不完全(公司网速dow ...

  2. jquery刷新局部和全页的方法

    一.全页面刷新方法: window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.location.relo ...

  3. PKU 百练OJ Arbitrage

    http://bailian.openjudge.cn/practice/2240/ #include <iostream> #include <string> #includ ...

  4. 构建工具Bazel入门

    Bazel入门   原文:http://bazel.io/docs/getting-started.html 译者:chai2010 安装 安装过程请参考: http://bazel.io/docs/ ...

  5. [转] Linux 句柄是什么 ？

    源地址:http://www.blogjava.net/shijian/archive/2012/04/06/373463.html 1.句柄就是一个标识符,只要获得对象的句柄,我们就可以对对象进行任 ...

  6. PAT甲级——A1065 A+B and C (64bit)

    Given three integers A, B and C in [−], you are supposed to tell whether A+B>C. Input Specificati ...

  7. PAT甲级——A1062 Talent and Virtue

    About 900 years ago, a Chinese philosopher Sima Guang wrote a history book in which he talked about ...

  8. SDI在自定义的工具栏上添加下拉控件

    0.首先到自己的工具条上新建一个控件,并命名新ID 1.拷贝FlatComboBox.h和FlatComboBox.cpp到工程目录下 2.建立新类 class CTrackerToolBar : p ...

  9. 你真的会用Action的模型绑定吗？

    在QQ群或者一些程序的交流平台,经常会有人问:我怎么传一个数组在Action中接收.我传的数组为什么Action的model中接收不到.或者我在ajax的data中设置了一些数组,为什么后台还是接收不 ...

  10. shiro+jwt+springboot理解

    转自 https://www.cnblogs.com/fengli9998/p/6676783.html https://www.jianshu.com/p/0366a1675bb6 https:// ...