第一种，绝对定位

!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. python 生成json格式文件，并存储到手机上

    上代码 #!/usr/bin/env python # -*- encoding: utf-8 -*- import json import os import random "" ...

  2. Linux两台机器简历信任

    cd ~/.ssh ssh-keygen  -t  rsa scp ./id_rsa.pub root@192.168.1.1:/root/.ssh/authorized_keys

  3. PAT_A1067#Sort with Swap(0, i)

    Source: PAT A1067 Sort with Swap(0, i) (25 分) Description: Given any permutation of the numbers {0, ...

  4. 拾遗：Docker 基本应用

    https://wiki.gentoo.org/wiki/Docker 检查内核内核选项 exec /usr/share/docker/contrib/check-config.sh 使用 btrfs ...

  5. VC++ 2010 创建高级Ribbon界面详解(4)

    5.辅助控件 除了前面我们介绍的按钮,工具栏,编辑框等基本控件外,为了支持现代软件对丰厚的界面交互方式的要求,Visual Studio 2010还提供了很多其他的辅助控件,例如我们通常会用到的“上一 ...

  6. Linux apache httpd virtual配置

    必须要关闭 selinux,否则无法访问目录

  7. keepalived 参数中文说明

    GLOBAL CONFIGURATION Global definitions global_defs { notification_email { admin@example.com } notif ...

  8. 通过java api 读取sql 中数据（查询）

    配置文件:dbconfig.properties 里面的数据 jdbc.url.jwhat=jdbc\:mysql\://ip\:3306/laibadev?useUnicode\=true& ...

  9. leetcode.数组.16最接近的三数之和-java

    1. 具体题目 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一答案 ...

  10. idea中maven在install时出现一个问题

    Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test (default-test) on ...