第一种，绝对定位

!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. 第十五章 例行性工作(crontab)--循环执行的例行性工作调度 crontab（定时任务）

    循环执行的例行性工作调度 crontab(定时任务) 15.1 例行性工作调度 不考虑硬件与服务器的链接状态,Linux帮助提醒很多任务. Linux例行性工作是如何进行调度的? Linux调度就是通 ...

  2. webpack2诸类事宜

    写在最前:webpack的总结也是自己坑过,实践过但是也是针对性的使用,在加上webpack的背景,对于其‘原理’方面有很大的不正确的理解,有错误的地方,请尽情指出(乖巧~) 由于版本遇到的问题: 在 ...

  3. C#WinForm 窗体单例模式 反射单例

    做了个mdi窗体 原以为指定一下MDIParent就可以了 没想到多次点击会出现多个窗体的现像 所以用到了单例模式 做法是这样的(学习出处:连接) 1.在子窗体声明一个子窗体类型的私有静态变量 并把子 ...

  4. POJ 3469 /// 最大流Dinic

    题目大意: N个模块 在核A上执行花费a[i] 在核B上执行花费b[i] 有M个模块组合(d1,d2) 若d1模块与d2模块在不同核上执行需多花费w[i] 求执行所有模块所需的最小花费 挑战P237 ...

  5. 随便写点什么，证明我还活着，VS2010出现的问题

    今天使用VS2010的过过程中出现了这个问题,哎... 简单地说,其实就是在我的sln里面有某个proj出问题了, 问题是某个或者某几个依赖项出问题了, 怎么办呢,没办法,只能一个一个排查, 我把所有 ...

  6. 内网渗透_win_socks代理_reGeorg+proxifier

    遇到内网windows机器,如果想远程登陆,通常得通过代理,常用的nc.lcx 工具可满足要求. 如 lcx 示例: 两台机器上均上传lcx.exe 在 xp机器(公网)上执行 lcx.exe -li ...

  7. PHP操作XML方法之SimpleXML

    SimpleXML简介 SimpleXML 扩展提供了一个非常简单和易于使用的工具集,能将XML转换成一个带有一般属性选择器和数组迭代器的对象. 举例XML XML结构部分引用自<<深入理 ...

  8. ES6点点点运算符

    1. rest(可变)参数 * 用来取代arguments 但比arguments灵活,只能是最后部分形参参数 function add(...values) { let sum = ; for(va ...

  9. Linux下安装.NETCore3.0

    今天把.NETCore从2.2升到3.0记录一下 Download .NET Core 3.0  :https://dotnet.microsoft.com/download/dotnet-core/ ...

  10. 解决小程序sessionid不一致

    由于小程序端两次请求的 sessionid 不一致, 导致后端无法取得 session,解决办法:在登录时获取sessionid //第一次请求登录接口时保存到sessionid中 success: ...