第一种，绝对定位

!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. java-Eclipse中使用JDBC连接数据库及相关操作

    准备工作:mysql-connector-java-5.1.6-bin.jar配置 package com.job; import java.sql.Connection; import java.s ...

  2. jQuery实用美化input 上传组建

     下载插件    (5)     简要教程 jquery-filestyle是一款可以简单实用的表单文件上传域美化jQuery插件.该插件可以将表单的文件上传域转换为类似Bootstrap按钮组的样式 ...

  3. 【Linux】- Systemd 实战篇

    转自:阮一峰的网络日志 一.开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件. 如果你想让该软件开机启动,就执行下 ...

  4. Python面试题之阅读下面的代码，写出A0，A1至An的最终值

    A0 = dict(zip(('a','b','c','d','e'),(1,2,3,4,5))) A1 = range(10) A2 = [i for i in A1 if i in A0] A3 ...

  5. createBottomTabNavigator: 怎么在切换tab的时候让页面重新渲染

    1.import withNavigationFocus from react-navigation to your class . 2.hen export your like this : exp ...

  6. 读书笔记---《Docker 技术入门与实践》---为镜像添加SSH服务

    之前说到可以通过attach和exec两个命令登陆容器,但是如果遇到需要远程通过ssh登陆容器的场景,就需要手动添加ssh服务. 下面介绍两种方法创建带有ssh服务的镜像,commit命令创建和通过D ...

  7. 安装php 在阿里云yum源的环境

    yum -y install httpd mysql mysql-server php php-mysql postgresql postgresql-server php-postgresql ph ...

  8. mfc中的_T

    mfc 中的字符串表示常用_T,意为text,定义为宏定义,可以方便的定义所有字符串为UNICODE(16位,长字符)或者ANSI(8位,短字符). 如果对于所有的字符串定义了_T并且定义了预处理标志 ...

  9. docker 命令操作

    1.停止所有的container,这样才能够删除其中的images: docker stop $(docker ps -a -q) 如果想要删除所有container的话再加一个指令: docker ...

  10. C# 类中访问修饰符的优先级与用法（public, internal, protected, private）

    首先:类成员的访问级别是以类的访问级别为上限的! 也就是类的访问级别低时,类成员的访问级别高也无法突破类的访问级别 public级别,作用域是这个解决方案() internal级别,作用域是整个装配集 ...