Positioning a div at the bottom of content div
My code is pasted down. I want that the div "target" to be po positioned at the bottom of div "conten area". Also header should stick to top of the browser and the footer should stick at the bottom of the browser.
Hope it makes sense.
Thanks in advance!!!
<!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>test</title>
</head>
<style>
#page-wrapper{}
#header{ background:#000; height:100px}
#content{ min-height:100%;}
#target{ background:#ebebeb; }
#footer{background:#000; height:40px}
</style>
<body>
<div id="page-wrapper">
<div id="header">header goes here</div>
<div id="content">
<div id="target">You need to fix me</div>
<开发者_如何转开发;/div>
<div id="footer">Content for New Div Tag Goes Here</div>
</div>
</body>
</html>
Are you after something like this?
http://jsbin.com/azebu5
How does it work? http://css-tricks.com/absolute-positioning-inside-relative-positioning/
<!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>test</title>
</head>
<style>
html,body{margin:0;padding:0}
#page-wrapper{position:absolute;top:0;bottom:0;left:0;right:0}
#header{ background:cyan; height:100px; position:absolute; top:0; left:0; width:100%}
#content{ position:absolute; background:#eee; top:100px; bottom:40px; left:0; right:0}
#target{ background:yellow; position:absolute; bottom:0; left:0; width: 100% }
#footer{background:red; height:40px; position:absolute; bottom:0; left:0; width:100%}
</style>
<body>
<div id="page-wrapper">
<div id="header">header goes here</div>
<div id="content">
<div id="target">You need to fix me</div>
</div>
<div id="footer">Content for New Div Tag Goes Here</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论