body{
  height:100%;  视窗的高度

min-height:100%;文档的具体高度
}

这两个百分比的具体高度在页脚永远放在文档底部非常重要，此时用min-height:100%

具体实现

html,

body
{ position:relative; min-height:100%; }

　　

css笔记——关于 body/html 的高度百分比的更多相关文章

  1. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  2. Div高度百分比

    有时候设置高度百分比,没有效果. 原因是父元素没有设置高度. 父元素可以设置高度为具体的px.或是100%等百分比. 这样子元素再能根据百分比来设置高度. <style type="t ...

  3. 让bootstrap-table支持高度百分比

    更改BootstrapTable.prototype.resetView 方法,以支持高度百分比定义,适应不同高度屏幕 BootstrapTable.prototype.resetView = fun ...

  4. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  5. css中如何实现左边的高度随着右边改变而改变

    css中如何实现左边的高度随着右边改变而改变 html结构: <div class="main"> <div class="main_left" ...

  6. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  7. 解决css的float父div没有高度

    在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计 <div class='box'> <div class='float_left'></d ...

  8. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

  9. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

随机推荐

  1. java搭建finagle(1)

    1.新建maven项目 2.pom文件添加依赖 添加3个主要依赖<dependency> <groupId>com.twitter</groupId> <ar ...

  2. material-singleinputform

    https://github.com/HeinrichReimer/material-singleinputform https://play.google.com/store/apps/detail ...

  3. Android4.4 蓝牙源码部分分析

    最近GOOGLE发布了Android4.4,看了一下源码:4.4的蓝牙打开流程这一部分还是有些变化的,从界面上看蓝牙开关就是设置settings里那个switch开关,widget开关当然也可以,起点 ...

  4. onClick,onServerClick,onClientClick

    <asp:button id=button1 runat=server test=button1 onclick=button1_onclick/> <input type=butt ...

  5. yii2 model源码解读

    模型yii\base\Model 模型主要实现了验证规则和验证器确保输入的数据是安全和正确的. 模型的流程: 1.从请求中读取数据.使用load或者loadMultiple或者手动赋值.load会根据 ...

  6. MYSQL-- binlog事件详解

    mysqlbinlog -vvv log.000001 # at # :: server id end_log_pos CRC32 sequence_number= SET @@SESSION.GTI ...

  7. mysql --The MEMORY Storage Engine--官方文档

    原文地址:http://dev.mysql.com/doc/refman/5.7/en/memory-storage-engine.html The MEMORY storage engine (fo ...

  8. 小白日记18：kali渗透测试之缓冲区溢出实例（二)--Linux，穿越火线1.9.0

    Linux系统下穿越火线-缓冲区溢出 原理:crossfire 1.9.0 版本接受入站 socket 连接时存在缓冲区溢出漏洞. 工具: 调试工具:edb: ###python在漏洞溢出方面的渗透测 ...

  9. ESX虚拟机文件列表详解

    http://jackiechen.blog.51cto.com/196075/210492 关闭状态时的文件列表: *-flat.vmdk:虚拟机的原始磁盘文件,包含整个虚拟机镜像.   *.nvr ...

  10. 怎样用VB自动更新应用程序

    具体程序实现如下:在应用程序工程MyApp中的部分代码如下:Option Explicit'编译后的应用程序名称,注意没有后缀 .EXE,本例为MYAPPPrivate Const App_Name ...