<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .top {

            width: 100%;

            height: 40px;

            background: #000;

            color:#fff;

            position:absolute;

            top:0;

            /*以上设置是重点必须的*/

            text-align:center;

            line-height:40px;

        }

        .bottom{

            width:100%;

            height:40px;

            background:#000;

            color:#fff;

            position:absolute;

            bottom:0;

            /*以上设置是重点必须的*/

            text-align:center;

            line-height:40px;

        }

        .mainBox{

            width:100%;

            position:absolute;

            top:40px;

            bottom:40px;

            /*以上设置是重点必须的*/

        }

        .mainBox .leftBox{

            height:100%;

            width:200px;

            float:left;

            margin-bottom:40px;

            overflow: auto;

            /*以上设置是重点必须的*/

            border:6px solid green;

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

            text-align:center;

            line-height:40px;

        }

        .mainBox .rightBox{

            height:100%;

            margin-left:220px;

            /*以上设置是重点必须的*/

            border:6px solid crimson;

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

            overflow: auto;

            text-align:center;

            line-height:40px;

        }

        .left1{

            background-color: #0088cc;

            width: 100%;

            height: 60%;

        }

        .left2{

            background-color: #CCCCCC;

            width: 100%;

            height: 40%;

        }

    </style>

</head>

<body>

<div class="top">顶部，高度40px</div>

<div class="mainBox">

    <div class="leftBox"><!--左盒子，固定宽度200px，高度自适应铺满屏幕剩余高度-->

        <div class="left1"></div>

        <div class="left2"></div>

    </div>

    <div class="rightBox">右盒子，距离左盒子20px，高度自适应宽度自适应铺满屏幕剩余高度</div>

</div>

<div class="bottom">底部，高度40px</div>

</body>

</html>

使用absolute布局的更多相关文章

  1. margin+absolute布局：右栏固定主内容自适应 demo

    margin+absolute布局:右栏固定主内容自适应 demo 头部 Aside侧边栏区域 Main主内容区域 底部 #demo{width:80%;margin:auto;height:300p ...

  2. 一种移动端position:absolute布局：

    一种移动端position:absolute布局:   1.他父级不需要加上 position:relative; 如果父级不是不是body,则加position:absolute; 2.红色加量部分 ...

  3. absolute布局和css布局释疑

    jqueryui也不是万能的, 有时候, 也需要自己写一些, 由 css 和jquery结合的一些东西, 如: banner中, 依次播放的div等 ## 关于jquery设计的一些思想和理念?but ...

  4. ExtJS 布局-Absolute布局（Absolute layout）

    更新记录: 2022年5月31日 发布本篇 1.说明 使用xy配置项设置子组件在父容器中绝对位置,本质是将子组件的CSS的position设置为absolute,然后使用x和y配置项映射到CSS的to ...

  5. absolute布局的替代实现

    京东商城首页标价定位 小横条首页导航的下拉 1.京东商城首页标价定位 .p-img{ height: 130px;} .p-price{ margin:-28px 0 0 74px;} .price{ ...

  6. 用absolute进行页面的自适应布局

    用position:absolute和top,left,bottom,right进行设置可以进行页面的头部,底部,左边框,内容的自适应布局,可以代替position:fixed; <!DOCTY ...

  7. HTML中的布局方式：absolute、relative、fixed、static

    在CSS中关于定位的内容是: position:relative | absolute | static | fixed     static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z- ...

  8. 网页布局的应用（float或absolute）

    一个浮动(左浮动或右浮动) 垂直环绕布局(float.clear) 左右两列布局(float.absolute) 三栏网页宽度自适应布局(float.absolute) 注意:网页设计中应该尽量避免使 ...

  9. ExtJs布局详解

    序言 1.百度百科上说:ExtJs功能丰富,无人能出其右.无论是界面之美,还是功能之强,extjs都高居榜首. 2.呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局.(extjs是4 ...

随机推荐

  1. Linux电源管理_autosleep－－（五）【转】

    本文转载自:https://blog.csdn.net/wlsfling/article/details/46005409 1. 前言 Autosleep也是从Android wakelocks补丁集 ...

  2. Yii使用笔记 2

    yii中的 getId等函数, id更多的是一个 string, 而不是数字. CCaptchaAction > CAction > CComponent. 实现是 IAction. yi ...

  3. SpringBoot 整合携程Apollo配置管理中心

    携程官网对apollo的使用讲解了很多种方式的使用,但是感觉一些细节还是没讲全,特别是eureka配置中心地址的配置 这里对springboot整合apollo说一下 >SpringBoot启动 ...

  4. FJUT3574 HOME_W的附加题（带权线段树）题解

    题意: 给定n个数a1,a2,a3,……an.和m次操作. 每次操作格式如下 x y k   表示将a[x]替换为y.并求替换后,前k小的数之和 思路:我们用带权线段树维护权值,这里就是维护i的个数n ...

  5. JZ2440存储管理器--SDRAM

     为了cpu访问外部设备,ARM提供一个存储管理器部件,提供访问外部设备的所需的信号(对SDRAM.网卡.nor等设备进行初始化,以便存储器管理器配合CPU进行与外设数据通讯).   CPU通常读写一 ...

  6. 【转载】常用 Java 静态代码分析工具的分析与比较

    摘自:http://www.oschina.net/question/129540_23043常用 Java 静态代码分析工具的分析与比较 简介: 本文首先介绍了静态代码分析的基本概念及主要技术,随后 ...

  7. 搭建springboot环境

    1.前戏准备: SpringBoot核心jar包:这里直接从Spring官网下载了1.5.9版本. jdk:jdk1.8.0_45. maven项目管理工具:3.5版本. tomcat:8.5版本. ...

  8. python反爬虫解决方法——模拟浏览器上网

    之前第一次练习爬虫的时候看网上的代码有些会设置headers,然后后面的东西我又看不懂,今天终于知道了原来这东西是用来模拟浏览器上网用的,因为有些网站会设置反爬虫机制,所以如果要获取内容的话,需要使用 ...

  9. 牛客练习赛7 E 珂朵莉的数列（树状数组+爆long long解决方法）

    https://www.nowcoder.com/acm/contest/38/E 题意: 思路: 树状数组维护.从大佬那里学习了如何处理爆long long的方法. #include<iost ...

  10. Java单例设计模式（实现Java的一个类只有一个对象）

    单例设计模式的定义:单例设计模式是一种软件设计模式,在它的核心包含一个称为单例类的核心类. 核心便是希望一个类只有一个对象.  如何实现类在内存中只有一个对象呢? 第一步:构造私有:第二步:本身提供一 ...