<!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. c# 删除空文件夹

    https://www.cnblogs.com/vikimono/p/11066778.html

  2. topology进程结束会不会关闭数据库连接

    测试环境:redhat,oracle 11.2.0.3.0 测试目标:当java进程关闭之后,进程的数据库连接会不会被释放,何时被释放 实验证明:在运行topology前,执行 select coun ...

  3. Struts2OGNL

    OGNL: 什么是OGNL  Object Graph Navigation Language 开源项目,取代页面中Java脚本,简化数据访问 和EL同属于表达式语言,但功能更为强大  OGNL在St ...

  4. Python学习day35-并发编程(1)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  5. python web 分页组件

    闲来无事便写了一个易使用,易移植的Python Web分页组件.使用的技术栈是Python.Django.Bootstrap. 既然是易使用.易移植的组件,首先介绍一下其在django框架中的调用方式 ...

  6. PIL的ImageDraw的颜色问题

    因为我的图片的单通道的,所以用 draw = ImageDraw.Draw(image) im_width, im_height =], info[], info[], info[]) color=d ...

  7. Js中获取时间 new date()的用法

    Js中获取时间 new date()的用法 获取时间: var myDate = new Date();//获取系统当前时间 myDate.getYear(); //获取当前年份(2位) myDate ...

  8. 路飞学城-Python爬虫集训-第一章

    自学Python的时候看了不少老男孩的视频,一直欠老男孩一个会员,现在99元爬虫集训果断参与. 非常喜欢Alex和武Sir的课,技术能力超强,当然讲着讲着就开起车来也说明他俩开车的技术也超级强! 以上 ...

  9. LUOGU P1970 花匠 (Noip 2013)

    传送门 解题思路 好多大佬用的dp啊,貌似贪心可以做,每次所选的一定是每个连续递增或递减序列的最后,直接模拟就行了,注意判断一下头和尾相等的情况. #include<iostream> # ...

  10. Vue 本地代理 纯前端技术解决跨域

    vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...