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. CSUOJ 1560 图书管理员的表白方式

    Description 小V是中南大学图书馆的图书管理员,每天要整理很多同学们还回来的书.久而久之,他认识了很多常来图书馆的同学,比如说小L.简而言之吧,就是小V喜欢上了小L,并且想在下一次她来还书的 ...

  2. MySQL Insert语句单个批次数量过多导致的CPU性能问题分析

    [问题] 最近有台服务器比较频繁的CPU报警,表现的特征有CPU sys占比偏高,大量慢查询,大量并发线程堆积.后面开发对insert的相关业务限流后,服务器性能恢复正常. [异常期间线程处理情况] ...

  3. [ 转载 ]学习笔记-svn用法详解

    SVN服务器搭建和使用(一) Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上 ...

  4. python的可变与不可变数据类型

    <python的可变与不可变数据类型>     python与C/C++不一样,它的变量使用有自己的特点,当初学python的时候,一定要记住“一切皆为对象,一切皆为对象的引用”这句话,其 ...

  5. 我们不能把JavaScript作为一个全功能的编程语言。它缺乏以下重要特征

    客户端JavaScript不允许读或写文件.这已被保存的安全原因. JavaScript不能用于网络的应用,因为没有这样的支持. JavaScript没有任何多线程或多处理器的能力.

  6. [UOJ240]aliens

    学习了一下凸优化DP,感觉挺有意思的 首先把所有点对称到左下角,然后以每个点为顶点画等腰直角三角形,将被覆盖的点去掉,现在所有点从左上到右下横纵坐标都是递增的,设坐标为$(x_{1\cdots M}, ...

  7. 20162325 金立清 S2 W10 C19

    20162325 2017-2018-2 <程序设计与数据结构>第10周学习总结 认识 线性表和树两类数据结构,线性表中的元素是"一对一"的关系,树中的元素是" ...

  8. vijos p1883

    题意: 有些东西就如同月光的魔法一般. Luke是爱着vijos的.他想为自己心爱的东西画些什么. 就画N个圆吧.把它们的圆心都固定在x轴上. 圆与圆.为了爱,两两不能相交.为了爱,它们可以互相贴在一 ...

  9. Codecademy python

    #1 print "Welcome to Python!" #2 my_variable = #3 # Set the variables to the values listed ...

  10. LR监控Apache资源

    前提本文使用的是lampp环境下自带的Apache服务 步骤1.修改Apache中Httpd.conf文件,添加如下代码:文件位置为:/opt/lampp/etc/httpd.conf,如下图: &l ...