1. <html>
  2. <head>
  3. <title>DIV+CSS自适应窗口高度</title>
  4. <style type="text/css">
  5. body {
  6. margin: 0;
  7. padding: 0;
  8. color: #ffffff;
  9. }
  10. #header {
  11. width: 100%;
  12. height: 100px;
  13. margin: 0 auto;
  14. padding: 0px;
  15. background-color: #000099;
  16. }
  17. #wrapper {
  18. width: 100%;
  19. margin: 0 auto;
  20. padding: 0px;
  21. background-color: #ffffff;
  22. }
  23. #nav {
  24. float: left;
  25. width: 120px;
  26. margin: 10px 10px 10px 5px;
  27. background-color: #009900;
  28. }
  29. #content {
  30. margin: 10px 10px 10px 145px;
  31. background-color: #990099;
  32. }
  33. #footer {
  34. position: absolute;
  35. width: 100%;
  36. height: 60px;
  37. bottom: 0;
  38. background-color: #990000;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div id="header">Header</div>
  44. <div id="wrapper">
  45. <div id="nav">Nav</div>
  46. <div id="content">Content</div>
  47. </div>
  48. <div id="footer">Footer</div>
  49. </body>
  50. </html>

当nav和content的高度大于一页的时候，不能满足这个需求，所以需要给nav和content设置min值。

DIV+CSS自适应窗口高度的更多相关文章

  1. DIV+CSS左右列高度自适应问题

    其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom: ...

  2. DIV+CSS自适应布局

    自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应            1,高度自适应 ...

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

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

  4. DIV+CSS 自适应布局

    两栏布局,左边定宽200px,右边自适应.如何实现?我的第一个反应就是:用flex伸缩盒呀,然后balabala...说完之后,面试官说,还有没有别的方法?flex有些浏览器不支持嗯...我愣了一下, ...

  5. div css 自适应

    怎样实现响应式布局? 对于这个问题,我们可以通过CSS3中的Media Query来实现,即媒介查询.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受 ...

  6. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  7. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  8. css实现自适应屏幕高度；

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  9. CSS两列高度自适应，右边自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Rsync服务部署使用

    rsync服务搭建过程(daemon模式) 配置服务 在/etc/rsyncd.conf文件中写入相应的配置: uid = root gid = root use chroot = no max co ...

  2. 「WC2016」挑战NPC

    「WC2016」挑战NPC 解题思路 这个题建图非常厉害,带花树什么的只会口胡根本写不动,所以我写了机房某大佬教我的乱搞. 考虑把一个筐 \(x\) 拆成 \(x1,x2,x3\) 三个点,且这三个点 ...

  3. [UOJ424]count

    虽然题目不难,但是这应该是我第一次在考场上成功拿到计数题的不算低的分数,值得记录 如果对序列处理出$i$后面第一个比它大的位置$r_i$,那么两个序列同构的条件就是$r_i$都相同,而$r_i$构成一 ...

  4. 关于mysql_connect CLIENT_MULTI_RESULTS

    自己写了一个mysql存储过程,以为php有用于调用存储过程的内建函数,查了一下发现只能用mysql_query(call pro())这样的方式,我认为从本质上也就相当于在mysql命令行里执行语句 ...

  5. 第一章--Go与web应用

    Go语言构建web应用的特性 可扩展 可维护 模块化 高性能 HTTP简介 HTTP是一种无状态.由文本构成的请求-响应(request-response)协议,这种协议使用的是客户端-服务器(cli ...

  6. Spring源码解析 – @Configuration配置类及注解Bean的解析

    在分析Spring 容器创建过程时,我们知道容器默认会加载一些后置处理器PostPRocessor,以AnnotationConfigApplicationContext为例,在构造函数中初始化rea ...

  7. 使用Chrome快速实现数据的抓取（一）——概述

    对于一些简单的网页,我们可以非常容易的通过Develop Tool来获取其请求报文规律,并仿照其构建报文来获取页面信息.但是,随着网页越来越复杂,许多页面是由js动态渲染生成的.要获取这类信息,则需要 ...

  8. Lingoes 一款功能强大、简明易用的多语言词典和文本翻译软件

    Lingoes 软件自述 Lingoes 是一款功能强大.简明易用的多语言词典和文本翻译软件,支持多达80种语言互查互译,这些语言包括 英.法.德.意.俄.中.日.韩.西.葡.阿拉伯语 及更多... ...

  9. UVa11187

    莫勒定理,证明如下: 请结合下图看代码: #include <iostream> #include <math.h> #include <iomanip> usin ...

  10. iOS开发里的Bundle是个啥玩意？！

    初学iOS开发的同学,不管是自己写的,还是粘贴的代码,或多或少都写过下面的代码 [[NSBundle mainBundle] pathForResource:@"someFileName&q ...