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. java实现两台电脑间TCP协议文件传输

    记录下之前所做的客户端向服务端发送文件的小项目,总结下学习到的一些方法与思路. 注:本文参考自<黑马程序员>视频. 首先明确需求,在同一局域网下的机器人A想给喜欢了很久的机器人B发送情书, ...

  2. 减少TIME_WAIT连接状态

    减少TIME_WAIT连接状态.网络上已经有不少相关的介绍,大多是建议: shell> sysctl net.ipv4.tcp_tw_reuse=1 shell> sysctl net.i ...

  3. Python 面向对象编程——继承和多态

    <基本定义>     在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类.父类或超 ...

  4. 【Vijos 1998】【SDOI 2016】平凡的骰子

    https://vijos.org/p/1998 三维计算几何. 需要混合积求四面体体积: 四面体剖分后合并带权重心求总重心: 四面体重心的横纵坐标是四个顶点的横纵坐标的平均数: 三维差积求平面的法向 ...

  5. NOI.AC WC模拟赛

    4C(容斥) http://noi.ac/contest/56/problem/25 同时交换一行或一列对答案显然没有影响,于是将行列均从大到小排序,每次处理限制相同的一段行列(呈一个L形). 问题变 ...

  6. [BZOJ4569][SCOI2016]萌萌哒(倍增+并查集)

    首先有一个显然的$O(n^2)$暴力做法,将每个位置看成点,然后将所有限制相等的数之间用并查集合并,最后答案就是9*(10^连通块的个数).(特判n=1时就是10). 然后比较容易想到的是,由于每次合 ...

  7. libuuid.so: cannot open shared object file: No such file or directory

    在玩ngx-lua时候有个 resty-uuid 需要引用 libuuid.so 动态库 打印log提示信息是这样的: libuuid.so: cannot open shared object fi ...

  8. 【对比分析六】JavaScript中GET和POST的区别及使用场景

    区别: GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符 POST:一般用于修改服务器上的资源,对所发送的信息没有限制 GET方式需要使用 Request ...

  9. BZOJ 1059: [ZJOI2007]矩阵游戏 匈牙利算法

    1059: [ZJOI2007]矩阵游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2351  Solved: 1156 题目连接 http:// ...

  10. [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

    相信如果用谷歌浏览器做移动端页面的时候 用touch事件的时候应该遇到过这个东东吧 documet.addEventListener("touchstart",function() ...