<html>
<head>
<title>DIV+CSS自适应窗口高度</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
color: #ffffff;
}
#header {
width: 100%;
height: 100px;
margin: 0 auto;
padding: 0px;
background-color: #000099;
}
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0px;
background-color: #ffffff;
}
#nav {
float: left;
width: 120px;
margin: 10px 10px 10px 5px;
background-color: #009900;
}
#content {
margin: 10px 10px 10px 145px;
background-color: #990099;
}
#footer {
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
background-color: #990000;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="wrapper">
<div id="nav">Nav</div>
<div id="content">Content</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
当nav和content的高度大于一页的时候，不能满足这个需求，所以需要给nav和content设置min值。
分享到：
相关推荐
css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度
div+css设置html底部自适应窗口，内容少时bottom在窗口底部，内容多时被撑到最下方。
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
CSS高度自适应代码（用了都说好）; JavaScript密码强度检测代码; JavaScript判断输入框中是否包含中文; JavaScript判断远程图片是否存在; Js+Css图片切换，带缩略图响应鼠标滑过; JS图片滚动代码（无缝、平滑）; 纯...
本文实例讲述了JS实现DIV高度自适应窗口。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &...
CSS高度自适应代码（用了都说好）; JavaScript密码强度检测代码; JavaScript判断输入框中是否包含中文; JavaScript判断远程图片是否存在; Js+Css图片切换，带缩略图响应鼠标滑过; JS图片滚动代码（无缝、平滑）; 纯...
在页面布局（layout）时经常是上左右的框架布局并且需要宽、高度的自适应，div+css是无法实现（*hegz： div+css其实是可以实现的，利用jQuery比较容易实现浏览器的兼容性），所以需要js来辅助。 主要通过 jQuery....
利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来实现自适应。 二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 （这种方法是可以在图片...
墨子企业官网系统是一款企业网站管理系统，基于PHP+Mysql架构的，可运行在Linux、Windows、MacOSX、Solaris等各种平台上，系统基于Laravel，支持自定义伪静态，前台模板采用DIV+CSS设计，后台界面设计简洁明了，功能...
当div是浮动的时候浏览器窗口发生变化的时候不能居中显示（因为浮动的时候一般设定的有left或者right值） 可以先用jquery获取外围的div随浏览器变化而变化的宽度（加上监听事件） 之后再获取div的宽度 例如： 代码...
Co.MZ 是一款轻量级企业网站管理系统，基于PHP+Mysql架构的，可运行在Linux、Windows、MacOSX、Solaris等各种平台上，系统基于ThinkPHP，支持自定义伪静态，前台模板采用DIV+CSS设计，后台界面设计简洁明了，功能...
在jQuery EasyUI中，如果直接在form...首先设置样式，使html和body高度为100%（因form和div高度设置为100%需要继承上级）： <style type=text/css> html,body { height:100%; margin:0 auto; } </sty
求点击父页面的一个按钮以后，整个父页面向左移动，左侧则用来显示图片，结果dialog和原页面不在一个层上，dialog直接弹出的，并不在div里边，下面有个不错的解决方法，大家可以参考下
3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin加倍问题 3.11 深入浮动(Float) 3.11.1 文档流(Document Flow) 3.11.2 浮动定位...
自适应高度 3 16. 高度不适应 3 17. IE6下图片下有空隙产生 3 18. 对齐文本与文本输入框 3 19. LI中内容超过长度后以省略号显示 3 20. 为什么web标准中IE无法设置滚动条颜色了 3 21. 为什么无法定义1px左右...
使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码: 复制代码代码如下: <body> <div id=”box1″>1</div> <div id=”box2″>2</div> <div ...
动态生成div等HTML代码，利用外部样式表以实现多风格支持，根据窗口大小自适应宽高，以使编辑区域最大可视化，仿jBPM designer eclipse 插件布局与操作习惯（其中个人觉得属性输入要比eclipse 插件方便些），仿extJs...