div布局问题，怎么沉底？_html/css_WEB-ITnose-html教程-PHP中文网

div布局问题，怎么沉底？_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:16:36

原创

2053人浏览过

本帖最后由 lane_yang 于 2012-11-12 15:57:26 编辑

<!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>    <title>无标题页</title>    <style type="text/css">    body{        margin:0px;    }    #head{        height:50px;        background-color:lightGreen;    }    #nav{        float:left;        width:100%;        height:200px;        background-color:gray;    }    #content    {        float:right;        width:80%;        height:600px;        background-color:lightGray;    }    #foot{        height:50px;        background-color:lightGreen;    }    .clearFloat{        clear:both;    }    #img    {        float:left;        width:100%;        height:200px;        background-color:lightBlue;        margin-bottom:0px;    }     #main    {        float:left;        width:100%;        margin-bottom:0px;    }    #navContainer{        float:left;        width:20%;        background-color:#eeeeee;        margin-bottom:0px;    }        </style></head><body><div><div id="head">header</div><div class="clearFloat"></div><div id="main"><div id="navContainer"><div id="nav">tree</div><div class="clearFloat"></div><div id="img">image</div></div><div id="content">content</div></div><div class="clearFloat"></div><div id="foot">footer</div></div></body></html>

登录后复制

上面代码运行效果如下：
问题：请教各位大侠，我想把Img的div，放到foot之上左下角，如何做？非常感谢！！！
补充说明一下：content层是根据内容高度不固定。

回复讨论(解决方案)

<style>*{margin:0;padding:0;}._main{border:1px solid #ABC;width:500px;min-height:400px;margin:10px auto;position:relative;padding-bottom:20px;}._main header{border:1px solid green;height:20px;width:200px;}._main footer{border:1px solid green;position:absolute;left:0;bottom:0;}</style><section class="_main"><header>Test Header</header>可添加N多内容尝试<br />aaa<br />aaa<footer>这儿是居左下的图片</footer></section>

登录后复制

自伸缩居底

感谢回复，但是我这个程序要兼容不支持html5的浏览器

晕哦，你就这样感谢的啊，无满意结贴你也少得五十分！
不管怎么说我手动给你打代码测试了半天，没功劳还没苦劳啊~