div layout problem, how to sink it to the bottom? _html/css

div layout problem, how to sink it to the bottom? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:16:36

Original

1891 people have browsed it

This post was last edited by lane_yang on 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>

Copy after login

The running effect of the above code is as follows:
Question: I would like to ask you all for advice. How to put the Img div in the lower left corner above the foot? Thank you so much! ! !
Additional explanation: the content layer is not fixed according to the content height.

Reply to the discussion (solution)

<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>

Copy after login

Self-scaling to the bottom

Thanks for the reply, but my program needs to be compatible with those that do not support html5 Browser

Oh wow, that’s how you thank me. If you’re not satisfied with the post, you’ll lose fifty points!
Anyway, I manually typed and tested the code for you for a long time, but it’s no credit and no hard work~