CSS布局:div高度随窗口变化而变化(BUG会有滚动条)

<!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>

时间: 2024-10-06 10:20:55

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

div高度随窗口变化而变化

<!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高度随窗口变化而变化</

CSS布局之-高度自适应

何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在兼容浏览器方面也稍微复杂一些. 布局思路 在IE7+及chrome.firefox等浏览器中,高度自适应可以利用绝对定位来解决.但一个元素是绝对定位时,如果没有给它设定高度或宽度,则它的的高度和宽度是由它的top.right.bottom.left属性决定的,但这一法则在IE6中并不适用,因此在IE

css 父div高度为0

当css 中父类div 高度为为时,可能是子类div 元素用了float,没有加clear属性. .clear { clear: both; font-size: 0; line-height: 0; height: 0; visibility: visible; }

DIV布局-DIV高度不同自动换行并对齐《转》

每个div框内容有多有少,要支持div高度自适应,还要添加的div自动追加,并且换行还要保持每行对齐. 刚开始的效果: 给出了完美解决方案: 效果: 因为要支持每个div可删除,删除后,后面的div自动补齐,所以用table不显示(除非想自虐的人可以试下) 最终就是css修改了一下就搞定了... 1 <html> 2 <head> 3 <style> 4 .test_area{ 5 width:100%; 6 background-color:#FFFFFF; 7 mi

纯CSS 实现DIV 高度 height 100% 全屏布局

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css"> *{ margin: 0; padding:0;

CSS布局自适应高度解决方法

这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充.加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题. 先看代码: 1 #wrap{ 2 overflow: hidden; 3 } 4 5 #sideleft, #sideright{ 6 padding-bottom: 32767px; 7 margin-bottom: -32767px

css设置div高度与宽度相等的一种方法

div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百分比时,padding-top和padding-bottom使用的也是宽度的百分比,而不是高度的!!!),使div变成正方形. 2.这样设置后,还有问题,div里的内容都被挤到底部了.另外考虑div里文字本身的高度,修改为: div.category{ width:33%; padding:14%

CSS div和css布局

一.div和span DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 DIV和span的区别在于,span是内联元素,div是块级元素.div占用整行,span只会占用内容大小的部分.div可以改变size,span不可以改变size 二.盒模型 margin 盒子外边距,增加的话,内盒大小不会变 padding 盒子内边距,增加的话,border向外扩大,内盒大小本身不会变 border 盒子边框宽度 width 盒子宽度 height 盒子高度 三.布局

css折叠样式(4)——div+css布局

内容概要: 一.div和span (1)块级标签:div (2)内联标签:span 如图所示: 二.盒模型(重要) 注:可用浏览器的调试工具可查看盒子 (1)margin:盒子外边距 (2)padding:盒子内边距(会改变块的大小) (3)border:盒子边框宽度 (4)width:盒子宽度 (5)height:盒子高度 ①:外边距和内边距区别: demo.html <!doctype html> <html> <head> <title>Div+Css