css中 出现height为100%失效的原因及解决方案
我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。解决如下:
html,body{
height: 100%;
margin: 0;
padding: 0;
}
那么浏览器是如何计算高度和宽度的?
Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽,会自动填满整个横向宽度 。
但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。
因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。
即父元素的高度只是一个缺省值:height: auto;我们设置height:100%时,是要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。
css中 出现height为100%失效的原因及解决方案的更多相关文章
- CSS难点 为什么height设置100%会失效,分栏目等高布局(高度自适用布局)的实现方案
前言 相信在平时写CSS的时候大家都或多或少遇见过设置了height为百分比的时候发现不起作用.今天我们就来一探究竟 原因:父元素未设置具体高度,子元素设置height:100%是无效的. 现象以及方 ...
- CSS中设置height:100%无效的解决方案
在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...
- CSS中的height与line-height的区别
<p class='text'>高与行高的区别</p> 那么我要想让这些字上下居中那么可以用宽度和行高控制 .text{ height:25px; line-height:25 ...
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效 Jquery 中 $('obj').attr('checked',true)失效的几种解决方案
1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; }) 为什么:attr为失效 ...
- css 中 overflow: hidden清楚浮动的真正原因
1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...
- Jquery 中 $('obj').attr('checked',true)失效的几种解决方案
转载自:搜狐博客 大拙无为 1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; ...
- UE4中Bebavior Tree中Delay及其后面代码失效的原因
具体原因是因为节点的执行过程中,该节点及其父节点的Decorator条件不满足,而节点又受到flow control的影响,导致中途强制结束了Task节点的执行,具体如下. UE4中的Behavior ...
- Mac的VIM中delete键失效的原因和解决方案
在Mac的键盘上实际是没有backspace这个键的.其实Mac的delete就是Windows的backspace,实现的都是向左删除的功能.Mac上如果要实现向右删除的功能需要使用⌘+delete ...
- wpf 绑定失效的原因及解决方案
有时候,您会发现在程序开始时还能正常运行的绑定失效了.就个人经验而言,绑定的失效主要分为两种情况:对于One-way绑定而言,如果软件开发人员绕过绑定直接更改了目标属性,那么绑定将会失效.而对于Two ...
随机推荐
- Java实现 蓝桥杯 历届试题 国王的烦恼
问题描述 C国由n个小岛组成,为了方便小岛之间联络,C国在小岛间建立了m座大桥,每座大桥连接两座小岛.两个小岛间可能存在多座桥连接.然而,由于海水冲刷,有一些大桥面临着不能使用的危险. 如果两个小岛间 ...
- java实现第七届蓝桥杯圆圈舞
圆圈舞 题目描述 春天温暖的阳光照耀着大地,正是草原上的小动物们最快乐的时候.小动物们在草原上开了一个舞会,欢度这美好的时光. 舞会上最重要的一个环节就是跳圆舞曲,n只小动物手拉手围成一大圈,随着音乐 ...
- SOA架构和微服务架构的区别与特点
1.SOA架构和微服务架构的区别 首先SOA和微服务架构一个层面的东西,而对于ESB和微服务网关是一个层面的东西,一个谈到是架构风格和方法,一个谈的是实现工具或组件. 1.SOA(Service Or ...
- ASP.NET Core 3.1 WebApi部署到腾讯云CentOS 7+Docker
一.准备 首先需要有一台CentOS服务器,安装最新版Docker,配置镜像加速等,安装方法网上很多,下面是一些相关指令: yum install -y yum-utils device-mapper ...
- jQuery实现瀑布流布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- PHP 直接插入排序
php数组下标从0开始,所以第一步就是数组长度加1,数组元素全部后移一位,把下标0对应值设置为哨兵.结果顺序排序完成后,删除哨兵. function insert_sort($arr) { //这里可 ...
- Linux中GitLab的部署
1.版本控制介绍 版本控制最主要的功能就是追踪文件的变更.它将什么时候.什么人更改了文件的什么内容等信息忠实地了记录下来.每一次文件的改变,文件的版本号都将增加.除了记录版本变更外,版本控制的另一 ...
- BT.656视频信号解码
BT.656视频信号解码 BT.656协议标准 ITU-R BT.601和ITU-R BT.656是ITU-R(国际电信联盟)制定的标准.严格来说ITU-R BT.656是ITU-R BT.601 ...
- VS Code WebApi系列——2、jwt结合数据库校验
Knowledge should be shared free. 我们都知道WebApi最重要的作用就是为外部服务提供相应的数据接口和服务,所以一般WebApi都会连接后台数据库,那么最重要的一件事就 ...
- 用python玩推理游戏还能掌握基础知识点,有趣又充实,你不试试吗?
可能更多的人依然还在苦苦的学python各种知识点,但其实同样很多人,玩着游戏就把python学会了. 用python玩推理游戏,是这份python教程中的12个游戏的其中之一. 有关这份Py ...