子DIV自适应父DIV高度

资源收藏admin2009年06月29日536 点击数

效果要求为子左侧Sidebar能拉长到父DIV wrapper 高度（父DIV不设置确切高度），当父DIV高度变化随里面Content高度不同而变化的时候，Sidebar仍然能充满高度，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>子DIV自适应父DIV高度</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"> <h2>header</h2> </div> <div id="sidebar"> <h2>sidebar</h2> <p>自动调整到与content高度相同</p> <p>导航菜单</p> <p>导航菜单</p> <p>导航菜单</p> <p>导航菜单</p> </div> <div id="content"> <h2>content</h2> <p>这是显示主内容的地方  这是显示主内容的地方  </p> <p>这是显示主内容的地方  这是显示主内容的地方  </p> <p>这是显示主内容的地方  这是显示主内容的地方  </p> <p>这是显示主内容的地方  这是显示主内容的地方  </p> <p>这是显示主内容的地方  这是显示主内容的地方  </p> <p>这是显示主内容的地方  这是显示主内容的地方  </p> <p>这是显示主内容的地方  这是显示主内容的地方  </p> <p>这是显示主内容的地方  这是显示主内容的地方  </p> <p>这是显示主内容的地方  这是显示主内容的地方  </p> </div> <div id="footer"> <h2>footer</h2> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

其实就三行CSS控制：

overflow:hidden;  /****这段加在父DIV wrapper里*******/
/****下面两行加到DIV sidebar 里****/
padding-bottom: 1000px;
margin-bottom: -1000px;

灵活运用，如果content更长的知，你可以设置值更大，比如2000、-2000

标签: CSS, DIV, XHTML, 代码, 自适应.

Purose

记录紫色蔷薇心情日记的地方.

文章分类

子DIV自适应父DIV高度

发表评论

最新文章

日志归档

其他