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. <泛> 多路快排

    今天写一个多路快排函数模板,与STL容器兼容的. 我们默认为升序排序 因为,STL容器均为逾尾容器,所以我们这里采用的参数也是逾尾的参数 一.二路快排 基本思路 给你一个序列,先选择一个数作为基数,我 ...

  2. properties中的编码如何生成：例如\u7AD9\u70B9这种

    在eclipse中的properties中的一种编码,例如\u7AD9\u70B9,是如何自动生成的. 这种编码方式当你要增加某个字段的时候,也要相应的添加这种编码方式下的格式,具体方法如下:

  3. 我的vim配置脚本

    自己的VIM 配置脚本,拥有自主独立知识产权(参考了一点别人的),只使用了一个插件ctags ,主要实现了一下功能: 自动补全括号,双引号,单引号,包括{},(),"" , ''只 ...

  4. android 数据存储方式

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 1,文件 2,内容提供者 3,偏好设置 4,数据库 5,网络存储. 网络存储,就是上传到 ...

  5. CF1027F Session in BSU

    link 花絮: 这场看起来打得还不错的样子……(别问我是用哪个号打的). 然后听说这题的思想被出了好多次,女生赛也出过,quailty算法,然而当时没反应过来,而且时间不多啦. 题意: 有n个人,每 ...

  6. Linux 下安装软件包的方法

    Linux应用软件的安装包有三种: 1) tar包,如software-1.2.3-1.tar.gz.它是使用UNIX系统的打包工具tar打包的. 2) rpm包,如software-1.2.3-1. ...

  7. 【BZOJ】4767: 两双手【组合数学】【容斥】【DP】

    4767: 两双手 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1057  Solved: 318[Submit][Status][Discuss] ...

  8. bzoj1503 Splay 维护名次数，支持删除

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1503 题解: 维护一颗Splay和一个外部变量,树中每个节点表示一个人,节点权值a + 外部变 ...

  9. 使用TensorFlow低级别的API进行编程

    Tensorflow的低级API要使用张量(Tensor).图(Graph).会话(Session)等来进行编程.虽然从一定程度上来看使用低级的API非常的繁重,但是它能够帮助我们更好的理解Tenso ...

  10. SQL（insert、delete、update）执行成功，但是数据库表中无显示无记录

    如题,程序中insert一条记录,调试过程中根据执行结果发现此条sql已经执行成功(影响行数为1且插入记录已生成自增主键正确值),但是查询数据库相应表时发现表中并无相应记录,通过直接在表中插入测试数据 ...