设置height=100%（网页内容能够更好的适配各种屏幕大小）

第一种是设置某个单独的div元素   height=100%无效

原因很简单，所有基于本分比的尺寸必须基于父元素，而你如果没有设置父元素尺寸的大小就会失效，这里我们设置<body>height=100%,有时候这样设置也是无效的，因为body的父元素html没有设置，没有设置的尺寸默认为0 x 0 像素，所有一般加上

html,body{height = 100%}就会解决

第二种：

很多情况下只设置body{height=100%}也能解决第一种情况的问题，但是部分浏览器还是要加上html{height=100%}

所以这里习惯性统一加上html,body{height = 100%}

html中设置height=100%无效的问题的更多相关文章

  1. CSS中设置height:100%无效的解决方案

    在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS  height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...

  2. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  3. 解决body设置height:100%无效问题

    1. 解决html设置height:100%无效问题 通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决 ...

  4. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  5. [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  6. css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  7. table布局 height=100%无效分析

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...

  8. 关于 iframe 在ie11 height:100% 无效的巨坑

    好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货 ...

  9. IE6 CSS高度height:100% 无效解决方法总结

    原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html   上面红色部分为 height:100%; 自动拉 ...

随机推荐

  1. luogu P1077 摆花 x

    P1077 摆花 题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m盆.通过调查顾客的喜好,小明列出了顾客最喜欢的n种花,从1到n标号.为了在门口展出更多种花,规定第i种花不能 ...

  2. consul windows下搭建

    起源 由于项目在linux部署,但是开发和测试是在windows下的,所以,暂时接触到consul,暂时也不会远程连接,只好在windows下安装consul 过程 去官网下载:https://www ...

  3. 文件操作工具类FileUtils

    package yqw.java.util; import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import ...

  4. python3学习笔记（二）：Python初识

    一.算法 在开始认真地编程之前,首先来解释下什么是计算机程序设计.简单地说,它就是告诉计算机要做什么.计算机可以做很多事情,但是它不会自己思考,需要我们告诉它具体细节,并且使用计算机能够理解的语言把算 ...

  5. 官方转译：截止2018-12-10，chromedriver与chrome对应关系表

    谷歌驱动下载地址: http://npm.taobao.org/mirrors/chromedriver/ http://chromedriver.storage.googleapis.com/ind ...

  6. [BZOJ2791]:[Poi2012]Rendezvous（塔尖+倍增LCA）

    题目传送门 题目描述 给定一个有n个顶点的有向图,每个顶点有且仅有一条出边.每次询问给出两个顶点${a}_{i}$和${b}_{i}$​​,求满足以下条件的${x}_{i}$和${y}_{i}$:   ...

  7. SettingBar的点击事件拦截

    接下来我们再来看另外一个案例,正如上面界面上显示的两个条目,车辆选择和始发地点选择,他们都有一个共同的特点就是都有共同的标题,内容和右剪头按钮,这种情况下我们都会把它封装成一个组合的自定义View来显 ...

  8. @WebService这个标签的作用是什么

    当实现 Web Service 时,@WebService 注释标记 Java 类:实现 Web Service 接口时,标记服务端点接口(SEI). (声明webservice服务) 要点: • 实 ...

  9. 用ps 查看线程状态

    ps -eLo pid,tid,class,rtprio,ni,pri,psr,pcpu,pmem,stat,wchan:30,comm 线程相关选项: THREAD DISPLAY H Show t ...

  10. java内存分布详解

    参见:http://blog.csdn.net/bluetjs/article/details/52874711 基本类型和引用类型.二者作为局部变量,都放在栈中,基本类型直接在栈中保存值,引用类型只 ...