<!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. 网络流（最大密集度子图，分数规划）：UvaLive 3709 Hard Life

    John is a Chief Executive Officer at a privately owned medium size company. The owner of the company ...

  2. Reward（拓扑排序）

    http://acm.hdu.edu.cn/showproblem.php?pid=2647 题意: 老板要给n个员工发工资最低工资是888: 但是工人们是有要求的 如果输入 a b 表示a的工资要比 ...

  3. 《算法问题实战策略》-chaper8-动态规划法

    Q1:偶尔在电视上看到一些被称为“神童”的孩子们背诵小数点以后几万位的圆周率.背诵这么长的数字,可利用分割数字的方法.我们用这种方法将数字按照位数不等的大小分割后再背诵. 分割形式如下: 所有数字都相 ...

  4. Asp.Net Mvc后台数据验证自测小Demo

    使用过MVC的同学一定不陌生MVC的模型绑定和模型校验,使用起来非常方便,定义好Entity之后,在需要进行校验的地方可以打上相应的Attribute,在Action开始时检查ModelState的I ...

  5. AbpZero--4.不使用谷歌字体，提升加载速度

    jtable控件样式中会使用到谷歌字体,每次访问都特别慢 1.打开jtable.css文件 [..\MyCompanyName.AbpZeroTemplate.Web\libs\jquery-jtab ...

  6. Linux散列表(一)——操作函数

    散列表(又名哈希表)仅仅需要一个包含单一指针的链表头.它是双向链表的变体.它不同于双链表——表头和结点使用相同的结构体——散列表对表头和结点有不同的定义.如下: struct hlist_head { ...

  7. storyBoard方式ScrollView的AutoLayout

    在使用storyboard和xib时,我们经常要用到ScrollView,还有自动 布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说 ...

  8. Swift中FDMB的使用（增、删、改、查）

    直接上代码: import UIKit class ZWDBManager: NSObject { //前提将FMDBDatabase的头文件增加到桥接文件里 var dataBase:FMDatab ...

  9. android ToolBar与DrawerLayout笔记

    通过Android Studio 生成的Nagvition DrawerLayout Activity 自带的布局中的NagvitionView会覆盖ToolBar直接通到statusBar. 但是自 ...

  10. yii自动登陆的验证机制浅析

    一直在使用yii进行开发, 也知道如何去使用, 也仅仅是知道怎么去用罢了, 终归是没研究过源码, 心里发虚, 今天遇到一个问题, 关于自动登陆的问题. 要求就是, 修改登陆保存session天数为自定 ...