关闭

height百分比失效_解决css中height:100%失效的问题

时间: 2018-08-06阅读: 2297标签: 布局

为了让网页内容更好的适应各类屏幕尺寸,一般都需要用到height:100%。但是会发现,height百分比失效并没有生效,这是什么原因造成的呢,以及我们需要如何解决呢?


height百分比失效的原因

你让div的height="100%",执行网页时,css先执行到,而整个网页中的内容还没有完全载入,是获取不到div外面的<body>等的高度的,所以height="100%"也就不能如愿显示了。  


解决解决css中height:100%失效的办法    

方法一:
html, body {
  height: 100%;
}


方法二:
div {
height: 100%;
position: absolute;
}

非定位元素的宽高百分比计算不会将 padding 计算在内,而定位元素会计算在内 。 



       
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/983

flex 增长与收缩

flex:auto 将增长值与收缩值设置为1,基本大小为 auto 。flex:none. 将增长值与收缩值设置为0,基本大小为 auto 。也就是固定大小。增长:基本大小 + 额外空间 *(增长系数 / 增长系数总和) 按比例划分额外空间,然后各自分配。

IOS 浏览器页面布局错位(如:点不到)的分析与解决

IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素):明明按钮在这里,却要在上面一点儿点击屏幕才能点到它

前端布局方式汇总及概念浅析

前端布局方式汇总:普通/文档流 布局、 Float 布局、绝对布局、Grid 网格布局、CSS3 Flex 弹性盒子布局、静态布局、流式布局、 自适应布局、响应式布局...

html使用frame框架导航跳转至指定的节的用法

主要内容:左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。

rem布局和vw布局的理解

rem是一个灵活的、可扩展的单位,由浏览器转化像素并显示。与em单位不同,rem单位无论嵌套层级如何,都只相对于浏览器的根元素(HTML元素)的font-size。css3中引入了一个新的单位vw,与视图窗口有关,vw表示相对于视图窗口的宽度,除了vw,还有vmin和vmax两个相关的单位。

html/css弹性布局的几大常用属性详解

弹性布局的名称概念:1、容器:需要添加弹性布局的父元素;项目:弹性布局容器中的每一个子元素,称为项目。2、主轴:在弹性布局中,我们会通过属性规定水平/垂直方向(flex-direction)为主轴;与主轴垂直的另一方向,称为交叉轴。

你以为 CSS 只是个简单的布局?

本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before 、::after 伪元素,transparent 、border,多重线性与径向渐变,多重内外阴影,如果你的效果不尽人意,请尝试在 Chrome 浏览器下预览。

前端必懂之Sticky Footer(粘性页脚)

Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部,页面内容不够长的时候页脚黏在视窗底部,内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移

Css几种水平垂直居中的方式的利弊

CSS 中实现水平垂直居中的方式很多。别看到水平垂直居中就准备右上角 x 掉,本文的重点不是罗列有多少种方式实现水平垂直居中方式,而是探讨一下常见的几种水平垂直居中的方式的利弊。

移动端导航布局

写在最前:移动端中导航的网格式布局无处无在,宽高怎么设置相适应?元素怎么居中对齐?不同场景怎么选择代码最高效?巧妙使用margin、padding等基础属性,小小技巧可以解决许多烦恼!

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!