<!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. 2019-1-10-WPF-使用-RenderTargetBitmap-快速截图出现-COMException-提示

    title author date CreateTime categories WPF 使用 RenderTargetBitmap 快速截图出现 COMException 提示 lindexi 201 ...

  2. Spring MVC 返回 xml json pdf 数据的配置方法

    <!-- Spring MVC 返回 xml 数据的配置方法 -->     <bean class="org.springframework.web.servlet.vi ...

  3. 【核心核心】5.Spring【DI】注解方式

    使用注解的方式依赖注入不用提供set方法 1.普通类型的注解 @Value @Value(value="春天") private String name; 2.对象类型的注解 @A ...

  4. Gartner首推机密计算：阿里云名列其中

    近日,全球信息技术研究机构Gartner发布了2019年云安全技术成熟度曲线报告(Gartner, Hype Cycle for Cloud Security, 2019, Jay Heiser, S ...

  5. 【codeforces 508D】Tanya and Password

    [题目链接]:http://codeforces.com/problemset/problem/508/D [题意] 给你一个字符的所有连续3个的子串; 让你复原出原串; (包含小写.大写字母以及数字 ...

  6. c++继承知识点小结

    继承的概念 继承是c++中一个重要的概念.继承是指,我们可以使用一个类来定义另一个类,在创建这个类时,我们就不需要重新编写数据成员与成员函数,这可以大大方便我们编写代码和维护代码的效率. 当我们使用一 ...

  7. CGLayer和CALayer区别

    CGLayer是一种很好的缓存常绘内容的方法.注意,不要与CALayer混淆.CALayer是Core Animation中更加强大.复杂的图层对象,而CGLayer是Core Graphics中优化 ...

  8. Java面试总结-基础篇1

    java多线程-- 自旋锁,偏向锁 好处:可以举Servlet和CGI的对比用户线程和守护线程的区别:用户线程结束后JVM会退出,然后守护线程才会终止(比如垃圾回收线程),如何在java中创建守护线程 ...

  9. Java内功修炼系列一观察者模式

    观察者模式又称发布-订阅模式,就是观察者通过订阅被观察者,或关注被观察者,从而实时更新观察者的信息.比如我们玩微博的时候,如果关注了一些博主,那么当博主发动态时,在首页微博列表中就会自动更新这些博主发 ...

  10. C#——找出实现某个接口的所有类 - Hello World - CSDN博客

    原文:C#--找出实现某个接口的所有类 - Hello World - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u0125260 ...