给body设置height:100%不起作用?

今天学习CSS3的渐变时,看到一个demo,就照着做,问题就来了。

例子代码是这样的:

效果图是这样的:

我自己照着例子敲出来的效果是这样的:

怎么回事啊?怎么跟例子效果不一样?代码明明不一样啊,body的高度也设置了100%啊,左边红线怎么不是body高度?右键一看原来body只有18px。怎么回事,不是100%的么?于是百度了一下,看到了这样一句话:“而跟W3C的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以,如果你把一个div的高度设定为height: 50%;,而它的父元素的高度是100px,那么,这个div的高度应该是50px”。就想到也要给html设置height:100%,然后就跟例子效果一样啦。虽然简单但也很容易忽视。

时间: 2024-10-12 23:27:16

给body设置height:100%不起作用?的相关文章

height:100%不起作用怎么办

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

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

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

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

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

height:100%不起作用(无效),div全屏

当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段代码. 下面给个div全屏的示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏div</title> <style> htm

设置整个页面的背景颜色,解决height:100%不起作用问题

body{ width:100%; height:100%; background-color:#f00; } 从以上代码可以看出 body 的背景颜色并没有想我们想的那样铺满整个背景: 解决方法:也要设置父元素的高度,即可 html,body{ width:100%; height:100%; background-color:#f00; } 从以上代码可以看出 body 的背景颜色铺满整个背景: 原文地址:https://www.cnblogs.com/dyy-dida/p/9101039.

如何让 height:100%; 起作用

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

table height 100%问题

背景:做项目时候,为了省事用table布局,table高度设置成100%,不起作用 原因: 有关浏览器工作模式大致可分为三种:Standarded Mode, Almost Standarded Mode及Quirks Mode...... 一个对象高度是否可以使用百分比显示,取决于对象的父级对象,Table在body之中,因此它的父级是body,而浏览器在标准模式下,是没有给body一个高度属性的,因此当设置height:100%;时,不会产生任何效果(内容根据高度自适应),而当给body设置

关于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>

table布局 height=100%无效分析

(从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487374.html 在使用table表格进行页面布局时,经常使用将表格高度设置style="height:100%"来实现表格高度满屏效果,但在最新的浏览器中经常遇到无效,根本原因再于浏览器使用用的工作模式的不同造成的:在Firefox与IE8标准模式下,HTML与Body标签默认是没有高度