height百分比以及高度自适应问题
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百分比以及高度自适应问题的更多相关文章
- CSS高度自适应 height:100%;
在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果 为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE htm ...
- 父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
- div高度自适应(总结:min-height:100px; height:auto;的用法)
对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...
- 利用padding-top/padding-bottom百分比,进行占位和高度自适应
在css里面,padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候,参照的是父元素的宽度. 比如:父元素宽度是100px, 子元素p ...
- 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...
- 巧用margin/padding的百分比值实现高度自适应
原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...
- css实现高度自适应
要求.上部固定高度50px,下部分自适应剩下整个屏幕 html, body { height: 100%; margin: 0px; padding: 0px; } #main { backgroun ...
- iframe高度自适应(同域)
今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...
- 【代码笔记】iOS-UILable高度自适应(sizeWithFont)
一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...
随机推荐
- luogu3703 [SDOI2017]树点涂色(线段树+树链剖分+动态树)
link 你谷的第一篇题解没用写LCT,然后没观察懂,但是自己YY了一种不用LCT的做法 我们考虑对于每个点,维护一个fa,代表以1为根时候这个点的父亲 再维护一个bel,由于一个颜色相同的段一定是一 ...
- .net mvc 框架实现后台管理系统4-layedit使用
做个简单的文章发布,使用了layui的layedit 效果: 在html页面添加: <textarea id="MyArticleContent" style="d ...
- 制作一句话图片马(NO)
- 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 ...
- OJ 21651::Cow Hurdles(佛罗一德的变式)
Description Farmer John wants the cows to prepare for the county jumping competition, so Bessie and ...
- 1152 Google Recruitment (20 分)
In July 2004, Google posted on a giant billboard along Highway 101 in Silicon Valley (shown in the p ...
- Web Worker 案例
什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...
- scrapy框架之(CrawlSpider)
一.CrawlSpider简介 如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调pa ...
- SPOJ - AMR11
A Thanks a lot for helping Harry Potter in finding the Sorcerer's Stone of Immortality in October. D ...
- python 爬虫系列07-天气爬虫
看天气 import requests from bs4 import BeautifulSoup ALL_DATA = [] def parse_page(url): headers = { 'Us ...