<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS布局：div高度随窗口变化而变化</title>
<style>
* {margin:0px;}
html {height: 100%; }
body {height: 100%; }
div { margin:0 auto;}
#top { width:800px; min-height:100%; background-color:#00f;}
*html #top {height:100%; background-color:#f00;}
*html body {height:100%; }
#topz{ width:800px; height:60px; background:#ddd;}
#topx{ width:800px; height:50px; background:#ccc;}
</style>
</head>
<body>
<div id="top">
    div高度随窗口变化而变化。
</div>
<div id="topx">
    <h2>中国最大的中文搜索引擎。</h2>
</div>
</body>
</html>

CSS布局：div高度随窗口变化而变化(BUG会有滚动条)的更多相关文章

  1. 纯CSS实现Div高度根据自适应宽度（百分百调整）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. CSS布局之-高度自适应

    何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...

  3. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

  4. CSS实现div高度自适应

    1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...

  5. CSS未知div高度垂直居中代码_层和布局特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. div高度自适应窗口高度布局

    给body和html都设置height:100%:然后子元素用百分比设置高度

  7. CSS布局-body高度不等于页面高度

    记录采坑: 博客记录问题,用作回忆用,不喜勿喷! html,body{width: 100%; height: 100%}这是初始定义的宽高.在布局越写越复杂的时候,布局很容易出现问题,例如一个页面中 ...

  8. css布局------上下高度固定,中间高度自适应容器

    HTML <body> <div class="container"> <div class="header"></d ...

  9. 纯Css实现Div高度根据自适应宽度（百分比）调整

    在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...

随机推荐

  1. oracle 表的管理(数据类型，表创建删除，数据CRUD 操作)

    表名和列的命名规则

  2. First Bad Version——LeetCode

    You are a product manager and currently leading a team to develop a new product. Unfortunately, the ...

  3. [JAVA关键字] synchronized

    synchronized, Example: public synchronized void XXX() {} 参考 http://wenku.baidu.com/link?url=ecb1Zivf ...

  4. HDU 4800/zoj 3735 Josephina and RPG 2013 长沙现场赛J题

    第一年参加现场赛,比赛的时候就A了这一道,基本全场都A的签到题竟然A不出来,结果题目重现的时候1A,好受打击 ORZ..... 题目链接:http://acm.hdu.edu.cn/showprobl ...

  5. RabbitMQ挂掉问题处理

    开发环境中的rabbitmq总是会挂掉,rabbitmq的执行都是ssh远程登录执行命令: rabbitmq-server & 认为加了&,进程会在后台执行不会受到终端的影响.所以不知 ...

  6. 学习 opencv---(10）形态学图像处理（2）：开运算，闭运算，形态学梯度，顶帽，黒帽合辑

    上篇文章中,我们重点了解了腐蚀和膨胀这两种最基本的形态学操作,而运用这两个基本操作,我们可以实现更高级的形态学变换. 所以,本文的主角是OpenCV中的morphologyEx函数,它利用基本的膨胀和 ...

  7. Python字符串连接的5种方法

    总结了一下Python字符串连接的5种方法: 加号 第一种,有编程经验的人,估计都知道很多语言里面是用加号连接两个字符串,Python里面也是如此直接用 "+" 来连接两个字符串: ...

  8. Demo_玩家移动（主要注意动画的设置）

    using UnityEngine; using System.Collections; public class NewPlayerMove : MonoBehaviour { private fl ...

  9. RHEL6.4编译安装gcc4.8.1

    因为平时用的linux虚拟机都是RHEL6.4, 自带的gcc版本号太低,不支持C++11,而从gcc4.8.1開始, gcc完美支持C++11全部特性. 故升级了一下. 以下是具体步骤: 1. 下载 ...

  10. ZOJ 1301 The New Villa (BFS + 状态压缩)

    题意:黑先生新买了一栋别墅,可是里面的电灯线路的连接是很混乱的(每个房间的开关可能控制其他房间,房间数<=10),有一天晚上他回家时发现所有的灯(除了他出发的房间)都是关闭的,而他想回卧室去休息 ...