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>
html,body {
    margin:0;
    height:100%;
}
#test {
    width:100%;
    height:100%;
    background-color:#FC0;
}
</style>
</head>

<body>
<div id="test"></div>
</body>
</html>
时间: 2024-09-30 17:33:36

height:100%不起作用(无效),div全屏的相关文章

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%不起作用吗? 答: 高度的计算方式完全不一样.事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现).或者你给整个页面设置一个绝对高度.否则,浏览器就会简单的让内容往下堆砌

设置整个页面的背景颜色,解决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.

用CSS3 vh 简单实现DIV全屏居中

vh.vw.vmin.vmax介绍 vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)vh:视窗高度的百分比vmin:当前 vw 和 vh 中较小的一个值vmax:当前 vw 和 vh 中较大的一个值 浏览器兼容性 (1)桌面 PC Chrome:自 26 版起就完美支持(2013年2月)Firefox:自 19 版起就完美支持(2013年1月)Safari:自 6.1 版起就完美支持(2013年10月)Opera:自 15 版起就完美支持(2013年7月)IE:自 IE10 起(包括 E

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

今天学习CSS3的渐变时,看到一个demo,就照着做,问题就来了. 例子代码是这样的: 效果图是这样的: 我自己照着例子敲出来的效果是这样的: 怎么回事啊?怎么跟例子效果不一样?代码明明不一样啊,body的高度也设置了100%啊,左边红线怎么不是body高度?右键一看原来body只有18px.怎么回事,不是100%的么?于是百度了一下,看到了这样一句话:“而跟W3C的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度.所以,如果你把一个div的高度设定为height: 50%;,而它的

网页js,DIV全屏布局

<script type="text/javascript"> $(document).ready(function(){ findDimensions(); }); function findDimensions(){ var h = document.documentElement.clientHeight-120; $("#maincontent").css("height",h); } window.onresize=find

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标签默认是没有高度

如何让 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设置