当父容器是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>

height:100%不起作用（无效），div全屏的更多相关文章

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

    vh.vw.vmin.vmax介绍 vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)vh:视窗高度的百分比vmin:当前 vw 和 vh 中较小的一个值vmax:当前 vw 和 vh 中较大的 ...

  2. 网页js，DIV全屏布局

    <script type="text/javascript"> $(document).ready(function(){ findDimensions(); }); ...

  3. table布局 height=100%无效分析

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...

  4. 如何让 height:100%; 起作用

    当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...

  5. CSS 如何让 height:100%; 起作用

    当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...

  6. 如何让 height:100%; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

  7. html body width height 100%使用

    首先我们来看一个实际的问题,让body中的一个div占全屏,(问题来源:http://stackoverflow.com/questions/1575141/make-div-100-height-o ...

  8. 关于height:100%两三事

    对于CSS的height:100%,顾名思义,该元素的高度自动填充为其父元素的高度.但该样式有时候会不起作用,Mark down 一下.>< 首先,看一下以下CSS代码: div { he ...

  9. [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

随机推荐

  1. Struct2

    1.MVC思想概述 Servlet作为前端控制器,负责接收客户端发送的请求,在Servlet中只包含控制逻辑和简单的前端处理:然后调用后端javabean来完成实际的逻辑处理: 最后转发到相应的jsp ...

  2. ActiveMQ消息队列介绍

    ActiveMQ是一个开源兼容Java Message  Service  (JMS) 1.1面向消息的中件间. 来自Apache Software Foundation. ActiveMQ提供松耦合 ...

  3. Clipboard.js – 现代方式实现复制文本到剪贴板

    复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...

  4. [deviceone开发]-QQ分享、微信分享和新浪微博分享

    一.简介 该demo主要实现QQ分享.微信分享和新浪微博分享.(调试包请到论坛扫描对应二维码下载) 二.效果图 三.相关讨论 http://bbs.deviceone.net/forum.php?mo ...

  5. javascript --- 设计模式之Module模式

    基本用法 先看一下最简单的一个实现,代码如下: var Calculator = function(){ // 这里可以声明私有成员 var eqCtrl = document.getElement( ...

  6. 记Ubuntu开机黑屏及解决过程

    之前遇到一次Ubuntu因为失误卸载了xinit.xserver的原因,导致开机黑屏无法进入系统,实际上当时是第一次遇到这种情况,因此花了点时间自己摸索,事后想来解决方案还是比较简单的,从目前的观点来 ...

  7. [转]DevExpress v13.2 Beta版重要更新

    昨日,DevExpress隆重宣布发布v13.2.3测试版,想抢先尝鲜的朋友可以在这里下载哦.希望使用DevExpress旧版本的朋友,看到这些更新后能尽快更新你的代码,以免造成不必要的麻烦. Das ...

  8. Merry Christmas & Happy New Year!!

    圣诞快乐,新年快乐!

  9. 编译安装mysql（Ubuntu10 64位)

    选用较好的编译器和较好的编译器选项,这样应用可提高性能10-30%,这个对大多数程序都非常重要 Mysql的编译,不同的版本具体的配置方式是有差别的 旧版的配置形式参考 这个形式主要是使用config ...

  10. Asp.net web hosting

      start /D "C:\Program Files\Common Files\Microsoft Shared\DevServer\10.0" /B WebDev.WebSe ...