父div的位置设置成相对的,即“position: relative;”。
而子div的位置设置成绝对的,并且下边缘设为0,即“position: absolute; bottom: 0;”
-------------------------
简单的一个需求, 映射着常常被忽略的知识啊。
上次面试没写出来,得学习。
?
·思路及要点:
?
父div的位置设置成相对的,即“position: relative;”。
而子div的位置设置成绝对的,并且下边缘设为0,即“position: absolute; bottom: 0;”。
?
?· 代码:
?
<head>
????<title>子div在父div中置底</title>
????<style type="text/css">
????????.father { width: 500px; height: 600px; position: relative; background-color: AliceBlue; }
????????.child { width: 400px; height: 100px; position: absolute; bottom: 0; background-color: AntiqueWhite; }
????</style>
</head>
<body>
????<div class="father">
????????<div class="child">
????????</div>
????</div>
</body>
</html>
·理论简介
http://apps.hi.baidu.com/share/detail/19629268
?
?
------------------------------底部居中----------------------
Div屏幕底部居中
<!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" xml:lang="zh-CN" lang="zh-CN"> <head> <style type="text/css"> html,body { width:100%; height:100%; margin:0px; padding:0px; overflow:hidden; } #Main { position:absolute; bottom:0px; left:0px; width:100%; height:100%; overflow:auto; z-index:1; } #ToolBar { position:absolute; bottom:0px; right:16px; width:100%; height:20px; text-align:center; background:#ccc; z-index:2; overflow:hidden; } </style> </head> <body> <div id="ToolBar">固定在页面底部不动</div> <div id="Main"> <p><strong>09即将流行的经典语录</strong></p> <div class="clear"> </div> <div class="info clearfix"> <p class="date"> </p> </div> <div class="blog_content" id="blog_content">TOP1 <br />