Html 页脚向上推以调整Content div中图像的大小

我试图创建一个简单的布局，其中将有：

标题

内容图片在这里

页脚

我试图实现的是在contentdiv中放置一个图像，该图像将根据查看器的浏览器大小调整大小

这一部分我可以实现，但是我希望页脚始终保持在浏览器的底部，并使content div中的图像调整大小，而不会产生溢出

下面是我正在尝试做的一个例子：

我已尝试复制此代码，但无法使其正常工作。 有没有人可以建议这样做的方法？ 我会帮上大忙的，因为到目前为止我还没有成功

提前感谢,，

---

Takashi

在css中使用百分比可能是一个解决方案：

你真的应该试着做一些事情，从错误中吸取教训。尽管如此，以下是您想要的布局：

看到这个了吗

HTML

帮助您学习CSS的链接：

---

看看感谢瓦斯科海特。是的-正如我在发布问题时提到的，我已经复制了该站点的代码-css和html。然而，我不能让它为我的布局工作。我无法实现的主要部分是调整图像大小，这样就不会产生溢出创建一个滚动，并且页脚总是在图像下方的屏幕中。如果你能建议一种方法来做到这一点，将不胜感激。谢谢。你可以试着用粘脚。谷歌的CSS粘性页脚。使用@foryou消息。@Jawad。谢谢你的建议。实际上我已经试过了-但是图像只是在页脚下面。我基本上需要页脚始终位于bowser底部，与粘性页脚相同，但强制内容图像调整大小，而不是创建溢出。我使用Google Chrome 18.0.1025.168作为浏览器和MAC OS X 10.6.8版。

<div id="header">My Beautiful website!</div>
<div id="content">
  <a href="#" title="">
    <img src="http://i328.photobucket.com/albums/l330/slowwkidd3923/backflip.jpg" alt="ups...">
  </a>
</div>
<div id="footer">
  This is the footer text!
</div>

/* basics */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* header */
#header {
    position: absolute;
    z-index:1;
    top: 10px;
    left: 10px;
}

/* content */
#content {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    bottom: 20px;
    text-align: center;
}
#content img {
    height: 96%;
}

/* footer */
#footer {
    position:absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    text-align: left;
    height: 20px;
    line-height: 20px;
}