将 div 定位在内容 div 的底部

Question

My code is pasted down.我的代码被粘贴了。 I want that the div "target" to be po positioned at the bottom of div "conten area".我希望将 div“目标”定位在 div“内容区域”的底部。 Also header should stick to top of the browser and the footer should stick at the bottom of the browser. header 也应该贴在浏览器的顶部，页脚应该贴在浏览器的底部。

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>

Answer 1

Are you after something like this?你在追求这样的事情吗？

http://jsbin.com/azebu5 http://jsbin.com/azebu5

How does it work?它是如何工作的？http://css-tricks.com/absolute-positioning-inside-relative-positioning/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>

将 div 定位在内容 div 的底部

问题描述

1 个解决方案

解决方案1
1 2011-06-14 09:58:40

将 div 定位在内容 div 的底部

问题描述

1 个解决方案

解决方案1 1 2011-06-14 09:58:40

解决方案1
1 2011-06-14 09:58:40