1.  你曾经是否说想要 高度占页面或者占div百分比无效的问题,相信你也搜索过了,就是说 需要 设置父亲父亲一直到祖宗html都要设置百分比,才有效果。

总之一句话:想用百分比设置他的高度,则它的父亲中至少有一个是固定高度,不然的话 全部父亲直到祖宗html(因为html外面就是浏览器,它是有高度的)都必须设置上百分比。 当然要排除那些脱离文档流的div,比如position:absolute,fixed,可以认为他们的父级就是浏览器,所以height百分比总是有效的,因为浏览器的高度是可以直到的啊。

2. 有时候 并不是直接用百分比,可能有部分margin啊,padding啊需要扣除掉,这时候 可以用 height: calc(100% - 1rem); height: calc(50% - 2px); 等等,这种情况有效的条件 也是必须是 第一点说明的,因为它也是用到了height百分比啊。

3. 有时候我们想通过设置百分比, 来维持高宽比例。 我们会想到用 width: 50%; height:50%; 这肯定不对的,因为height是相对容器高度的百分比,而宽是相对容器宽度的百分比。 两个参照物不一样,他们的比例不一定是1:1,而始终是外部容器的比例。因此我们的目的很简单,让他参照物相同。我们知道padding的参照物就是宽度的。那我们就用padding了。 原理很简单, 就是用padding-bottom去代替height。 比如博客园的logo我们想作为背景图,宽高=133/51, 如果我们把背景图的容器设置宽为50%,那么padding-bottom= 0.5*51/133 = 19.172932330827066% ; 这样宽高比例就会固定住了。 知道了这个方法,可以做很多事情。

4. 嗯、有些时候还可以考虑用 vh代替。。。

全部效果在这边,自己研究一下吧:

See the Pen Height百分比 by wenjie (@wenjie) on CodePen.

height百分比以及高度自适应问题的更多相关文章

  1. CSS高度自适应 height:100%;

    在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果 为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE htm ...

  2. 父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

  3. div高度自适应(总结:min-height:100px; height:auto;的用法)

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

  4. 利用padding-top/padding-bottom百分比,进行占位和高度自适应

    在css里面,padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候,参照的是父元素的宽度. 比如:父元素宽度是100px, 子元素p ...

  5. 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  6. 巧用margin/padding的百分比值实现高度自适应

    原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...

  7. css实现高度自适应

    要求.上部固定高度50px,下部分自适应剩下整个屏幕 html, body { height: 100%; margin: 0px; padding: 0px; } #main { backgroun ...

  8. iframe高度自适应(同域)

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...

  9. 【代码笔记】iOS-UILable高度自适应(sizeWithFont)

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

随机推荐

  1. sock文件

    无论是mysql,uwsgi还是nginx都会用到sock文件 首先它是由程序自动创建的,并不是我们自己手动.它的作用是用来通信.与之相对应的是tcp socket ,一般的程序会同时支持这两种方式, ...

  2. Qt 学习之路 2(30):Graphics View Framework

    Qt 学习之路 2(30):Graphics View Framework 豆子 2012年12月11日 Qt 学习之路 2 27条评论 Graphics View 提供了一种接口,用于管理大量自定义 ...

  3. 【转】xml文件中加入本地的dtd约束文件

    首先,我是以加载Struts2的来演示: 1 我们可以看到,越是文件中的 显示的是PUBLIC, 即从网络中获取约束文件dtd ,此时我需要将其配置成从自己的本地来获取dit文件 首先,先要有stru ...

  4. samtools软件作用

    samtools的说明文档:http://samtools.sourceforge.net/samtools.shtml samtools是一个用于操作sam和bam文件的工具合集,包含有许多命令.以 ...

  5. CF914E Palindromes in a Tree(点分治)

    题面 洛谷 CF 题解 题意:给你一颗 n 个顶点的树(连通无环图).顶点从 1 到 n 编号,并且每个顶点对应一个在'a'到't'的字母. 树上的一条路径是回文是指至少有一个对应字母的排列为回文. ...

  6. Java 安全套接字编程以及 keytool 使用最佳实践

    Java 安全套接字编程以及 keytool 使用最佳实践 http://www.ibm.com/developerworks/cn/java/j-lo-socketkeytool/

  7. 牌型种数-dfs-蓝桥杯2015

    牌型种数 牌型种数 小明被劫持到 X 赌城,被迫与其他 3 人玩牌. 一副扑克牌(去掉大小王牌,共 52 张),均匀发给 4 个人,每个人 13 张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花 ...

  8. esper(4-3)-Non-Overlapping Context

    语法 create context context_name start start_condition end end_condition 如: // 9点到17点此context才可用(以引擎的时 ...

  9. python 网页爬取数据生成文字云图

    1. 需要的三个包: from wordcloud import WordCloud #词云库 import matplotlib.pyplot as plt #数学绘图库 import jieba; ...

  10. 把linux图形启动界面修改成命令行界面

    由于图形界面比较耗资源,需要把启动界面修改成命令行界面,怎么修改呢? 1.vim /etc/inittab 2.把id:5:initdefault:改成 id:3:initdefault: 3.重启即 ...