如何让元素支持 height:100%效果

如何让元素支持 height:100%效果? 有
两种方法。
(1) 设定显式的高度值。 这个没什么好说的,例如,设置 height:600px,或者可以生效
的百分比值高度。例如,我们比较常见的:
html, body {
height: 100%;
}
(2) 使用绝对定位。 例如:
div {
height: 100%;
position: absolute;
}
此时的 height:100%就会有计算值,即使祖先元素的 height 计算为 auto 也是如此。
需要注意的是,绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的,区别
在于绝对定位的宽高百分比计算是相对于 padding box 的,也就是说会把 padding 大小值计算
在内,但是,非绝对定位元素则是相对于 content box 计算的。

原文地址:https://www.cnblogs.com/zhaoxiangshang/p/10260850.html

时间: 2024-11-02 19:16:54

如何让元素支持 height:100%效果的相关文章

HTML 中块级元素设置 height:100% 的实现

HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什么height:100%不起作用呢? 按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离.例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度. 而跟W3C的规范,百分比的

CSS中元素的height:100%如何起作用的?自适应高度

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度.如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度.而当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 答: 高度的计算方式完全不一样.事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现).或者你给整个页面设置一个绝对高度.否则,浏览器就会简单的让内容往下堆砌

使flex-direction: column的子元素height: 100%生效的办法

在flex-direction: column子元素里直接使用height:100%,height并不会被设置成100% <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&

height:100%不起作用怎么办

height:100%不起作用怎么办: 有时候给一个元素设置height:100%,希望能够实现高度自适应,但是往往不能够实现我们的效果. 下面先看一个例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <t

关于height:100%两三事

对于CSS的height:100%,顾名思义,该元素的高度自动填充为其父元素的高度.但该样式有时候会不起作用,Mark down 一下.>< 首先,看一下以下CSS代码: 1 div { 2 height: 100%; 3 } HTML代码: 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <p>我的名字叫做甲基苯醌</p> 6 <div>

关于height:100%

要想高度百分比起作用,一般来说,要满足两个条件:其一,父标签有高度可寻,就是向上遍历父标签要找到一个定值高度(body,html另外讨论),如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用:其二,标签本身的属性,如果inline属性的标签,如果没有浮动,zoom,或是绝对定位之类属性是不支持百分比高度的,block或inline-block属性可以说是高度百分比起作用的前提条件之一吧.而这里要讲的是关于body和html的高度百分比显示的.默认状态下,body

如何让 height:100%; 起作用

当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离.例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度. 而跟W3C的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度.所以,

CSS高度自适应 height:100%;

在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果 为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一列布局</title> <style> html, body { margin: 0; padding: 0; wi

height:100%与height:inherit的区别

一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素:height:auto:height:100%与inherit也都是auto: 2.父元素定高:height:100px; height:100%与inherit也都是100px: 三.绝对定位情况下大不同 如果子元素为绝对定位元素,则height:100%:参考的父级是离它最近的有定位属性的父级