第一种，绝对定位

!DOCTYPE HTML>

<html>

<head>

<meta charset="gb2312">

<title>头尾固定中间高度自适应布局</title>

<style>

html, body {

    height:%;

    margin:;

    padding:

}

#dHead {

    height:100px;

    line-height:100px;

    background:#;

    width:%;

    position:absolute;

    z-index:;

    top:;

    text-align:center;

}

#dBody {

    background:#FC0;

    width:%;

    overflow:auto;

    top:100px;

    position:absolute;

    z-index:;

    bottom:100px;

}

.mycontent {

    padding:20px;

}

#dFoot {

    height:100px;

    line-height:100px;

    background:#;

    width:%;

    position:absolute;

    z-index:;

    bottom:;

    text-align:center;

}

</style>

</head>

<body>

<div id="dHead">固定头部100px;</div>

<div id="dBody">

  <div class="mycontent"> 中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

    中间自适应部分<br>

  </div>

</div>

<div id="dFoot">固定尾部100px</div>

</body>

</html>

第二种：flex

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .main-flex{

            display: flex;

            height: 500px;

            flex-direction: column;

        }

        .main-flex .top,.main-flex .bottom{

            height: 60px;

            background: red;

        }

        .main-flex .middle{

            flex: ;

            background: blue;

        }

    </style>

</head>

<body>

    <div class="main-flex">

        <div class="top">头部</div>

        <div class="middle">

            <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>

            <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>

            <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>

            <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>

        </div>

        <div class="bottom">尾部</div>

    </div>

</body>

</html>

css之页面三列布局之左右上下高度固定，中间自适应的更多相关文章

  1. css之页面三列布局之左右两边宽度固定，中间自适应

    左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...

  2. css之页面三列布局

    左右两边宽度固定,中间自适应 第一种方法:左右两边绝对定位 html代码 <div class="left"></div> <div class=&q ...

  3. css实现三列布局，左右固定值，中间自适应。

    这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...

  4. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  5. CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？

    使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...

  6. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  7. CSS设计一个三列布局的页面

    探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要.无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset. 01 /* 02 KISSY CSS Rese ...

  8. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

  9. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

随机推荐

  1. 20. Jmeter抓包之APP请求

    APP测试过程中我们经常需要抓包,通常我们使用fiddler或者Charles.但是jmeter也可以抓包,而且非常好用,闲话不多说,下面进入正题. 步骤: 1.选择测试计划,添加线程组 2.选择工作 ...

  2. 6.1_springboot2.x分布式-整合SpringCloud

    1.SpringCloud简介 ​ Spring Cloud是一个分布式的整体解决方案.Spring Cloud 为开发者提供了在分布式系统(配置管理,服务发现,熔断,路由,微代理,控制总线,一次性t ...

  3. 两台linux服务器传文件方法

    scp -r /当前服务器的文件的路径 第二台服务器的用户名@第二台服务器的ip:/第二台服务器的存放文件的路径

  4. vue axios----基于 Promise 的 HTTP 请求

    vue axiosvue2.0之axios接口請求管理功能特性axios API開始使用get請求post请求多个请求并发拦截器移除一个拦截器:自定义的 axios 实例添加拦截器:vue2.0之ax ...

  5. 笔记38 Spring Web Flow——订单流程（定义基本流程）

    做一个在线的披萨订购应用 实际上,订购披萨的过程可以很好地定义在一个流程中.我们首先从 构建一个高层次的流程开始,它定义了订购披萨的整体过程.接下 来,我们会将这个流程拆分成子流程,这些子流程在较低的 ...

  6. Aria2 Centos8 安装配置

    使用chkconfig 或者 chkconfig –list就可以看出当前系统已经设置的各个服务在各个运行级别下的开闭状态.如果我们想设置某个服务自启动或者关闭的话,那么只需要按照下面的格式使用即可 ...

  7. C/C++中的return和exit

    return:只是退出函数;  ~是关键字. exit:是退出进程; ~是函数名. 整理自:https://www.cnblogs.com/cxchanpin/p/6927025.html

  8. Replication Controller、Replica Set

    假如我们现在有一个Pod正在提供线上的服务,我们来想想一下我们可能会遇到的一些场景: 某次运营活动非常成功,网站访问量突然暴增 运行当前Pod的节点发生故障了,Pod不能正常提供服务了 第一种情况,可 ...

  9. lua redis 操作

    https://redis.io/commands/keys 遍历redis里面的所有key ,还能进行模糊匹配, 这样就省去了对key的手动过滤了 比如 keys term_info* ) &quo ...

  10. ACM-ICPC 训练平台 & 比赛 分析

    the file can download in https://pan.baidu.com/s/1HwoLFHGAG-boQbIn9xIhxA occ5 the article is also pu ...