2 woailuzeyu woailuzeyu 于 2016.04.18 18:08 提问

为什么用rem设置div的高度不起作用呀? 2C

html {font-size: 62.5%;}
结果是10px
div {font-size: 1.2rem;height:3rem;}
最后结果是div文字大小是12px,但高度确实36px,而不是我想要的30px

各位大神,这是为毛呀???

6个回答

dxfncel
dxfncel   2016.04.18 18:32

你有试过把div的内边距离padding归零吗?实在不行直接用height:30px;何必那么纠结啊

woailuzeyu
woailuzeyu 归零了,用rem完全是想做响应式网页,为手机端考虑的
大约 2 年之前 回复
tangtang_fly
tangtang_fly   2016.04.25 15:26

因为浏览器中最小字体是12px,所以就算html中设了10px,最终也会强制使用12px

u010850027
u010850027   2016.04.18 19:33

直接用height:30px

qq_35432904
qq_35432904   2016.07.01 20:19

换个角度思考,既然不能用12px一下的字体,我们只要把字体设为12px以及以上的在转换为rem就可,为了好计算,我把字体设为100px
图片说明

tianyer
tianyer   2016.08.09 15:28

html {font-size: 62.5%;} 改为:html,body,div {font-size: 10px;}

u013263308
u013263308   2017.01.18 17:26

62.5%这个坑,如果这样设置的话,height和line-height就是以12px为基准的,而字体还是以10px为基准,所以计算的时候得分开算。不然的话用75%吧,html {font-size: 75%;}这样都是以1rem=12px来计算了

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
HTML学习之给div高度设置百分比不生效的问题(二)
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面乳腺,非常简单。 下面是html部分: 11111111 2222222222 33333333 就三个div,div是块级元素,宽度会默认撑开,如果不设置高度时,默认内容会撑开高度
div等元素height:100%高度为什么不生效
以前一直很郁闷一个问题,为什么设置height:100%不生效,尤其是设置body:height:100%不生效,后来就很少使用了这个了。今天在学习谷歌地图时关于height:100%看到了解答: In specific, all percentage-based sizes must inherit from parent block elements, and if any of those
解决html设置height:100%无效的问题
通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 你只需要在css处添加上html, body{ margin:0; height:100%; }即可。
层div高度100%的一种,用绝对层遮罩上下
Untitled Documenthead foot
DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上“style:"height:100%;"”是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上: html, body{ margin:0; height:100%; } 这样,
html5下让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗? 按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向
设置字体大小px、em和rem区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。 4.px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) em特点 1.em的值并不是固定的; 2....
关于移动端开发宽度高度,字体以及rem宽度使用的总结
遇到的问题:如何适配不同的手机屏幕。 简单的说media query可以解决一部分。但是media query目前是照着iphone5/iphone/iphone6s 三个不同尺寸来进行。 如果手机尺寸不在这三个范围之内,那么元素的宽度可以按照百分比来处理,但是高度就不行了。 比如就会出现在轮播图的情况下,原来的高度是写死如iphone5 200px;iphone6 2
CSS 如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗? 按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向
HTML给div设置百分比高度无效问题
1.如下代码 方案一:同时给顶层父类标签body和HTML设置一个高度 导致这样的原因是html和body标签默认宽度是整行,高度就只是一部分并不包括全部 HTML5画线、圆、矩形