Positioning a div at the bottom of content div_问答_开发者

Positioning a div at the bottom of content div

开发者 https://www.devze.com 2023-03-12 13:44 出处：网络

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 botto

相关专题：css position

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>