Heim > Artikel > Web-Frontend > div布局问题，怎么沉底？_html/css_WEB-ITnose
div布局问题，怎么沉底？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:16:361851Durchsuche
<!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的浏览器
晕哦，你就这样感谢的啊，无满意结贴你也少得五十分！
不管怎么说我手动给你打代码测试了半天，没功劳还没苦劳啊~
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：有frame的情况下，如何做菜单的当前效果，如何让左边菜单随着上面菜单的变化而变化_html/css_WEB-ITnoseNächster Artikel：请教一个关于框架的问题_html/css_WEB-ITnose