第一种，绝对定位

!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. 24. Jmeter GUI 及NON GUI实现分布式

    什么是分布式: Jmeter的集群模式可以让我们将多台机器联合起来一起产生负载,从而弥补单台机器负载生成能力不足的问题. 假设我们的测试计划会产生100个threads,我们使用6台机器进行分布式测试 ...

  2. Lilo的实现

    书承上文:http://www.cnblogs.com/long123king/p/3549267.html 我们找一份Lilo的源码来看一下 http://freecode.com/projects ...

  3. Pandas异常值处理

    import pandas as pd #生成异常数据 df=pd.DataFrame({'col1':[1,120,3,5,2,12,13], 'col2':[12,17,31,53,22,32,4 ...

  4. 在vue中获取不到canvas对象？ 两种解决办法。

    1. mounted 钩子函数 初次肯定获取到id 2. 如果canvas父级用到了v-if 请改成v-show ,vue Dom节点 重新渲染导致methods 方法获取不到对象.

  5. API 数据缓存（本地缓存）

  6. delphi xe10 获取屏幕截图

    //截取屏幕图片 function MakeScaleScreenshot(Sender: TControl): TBitmap; function GetScreenScale: Single; v ...

  7. 51 eigen、boost等基础库学习

    0 引言 eigen库是一个高层次的C++库,有效支持线性代数,矩阵和矢量运算,数值分析及其相关的算法.eigen除了C++标准库之外,不需要任何其他的依赖包.Eigen使用的CMake建立配置文件和 ...

  8. Oozie安装

    Oozie的安装与部署 1.解压Oozie $ tar -zxf /opt/softwares/oozie-4.0.0-cdh5.3.6.tar.gz -C /opt/modules/cdh/ 2.H ...

  9. NOIp2018集训test-9-7(pm) (联考一day1)

    又被辉神吊打了.今天不仅被辉神李巨吊打,还给基本上给全班垫底了. 看到T3就知道是十进制快速幂,全机房考试的当时应该就我会,结果我tm没找到递推. Orz lyc BM直接水过,Orz wys六个fo ...

  10. NX二次开发-C++的vector排序去重用法

    #include <algorithm> //vector排序去重 sort( BoxNum.begin(), BoxNum.end()); BoxNum.erase(unique(Box ...