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. luogu3703 [SDOI2017]树点涂色(线段树+树链剖分+动态树)

    link 你谷的第一篇题解没用写LCT,然后没观察懂,但是自己YY了一种不用LCT的做法 我们考虑对于每个点,维护一个fa,代表以1为根时候这个点的父亲 再维护一个bel,由于一个颜色相同的段一定是一 ...

  2. .net mvc 框架实现后台管理系统4-layedit使用

    做个简单的文章发布,使用了layui的layedit 效果: 在html页面添加: <textarea id="MyArticleContent" style="d ...

  3. 制作一句话图片马(NO)

  4. QDU_AP协会18级ST1

    A - A + B Problem II I have a very simple problem for you. Given two integers A and B, your job is t ...

  5. OJ 21651::Cow Hurdles(佛罗一德的变式)

    Description Farmer John wants the cows to prepare for the county jumping competition, so Bessie and ...

  6. 1152 Google Recruitment (20 分)

    In July 2004, Google posted on a giant billboard along Highway 101 in Silicon Valley (shown in the p ...

  7. Web Worker 案例

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...

  8. scrapy框架之(CrawlSpider)

    一.CrawlSpider简介 如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调pa ...

  9. SPOJ - AMR11

    A Thanks a lot for helping Harry Potter in finding the Sorcerer's Stone of Immortality in October. D ...

  10. python 爬虫系列07-天气爬虫

    看天气 import requests from bs4 import BeautifulSoup ALL_DATA = [] def parse_page(url): headers = { 'Us ...