Question

我正在尝试创建一个简单的布局：

HEADER

内容（此处图片）

FOOTER

我想要实现的是在内容div中放置一个图像，该图像将根据查看器的浏览器大小调整大小。

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

这是我想要做的一个例子： http://www.modernart.net/view.html?id=1,3,9

我尝试复制此代码但无法使其正常工作。有没有人可以建议这样做？我会非常乐于助人，因为到目前为止我没有运气。

提前致谢，隆

Answer 1

将百分比与css一起使用可能是一个解决方案：http://jsfiddle.net/rgv2e/

Answer 2

你真的应该尝试做事并从错误中吸取教训。尽管如此，这是你想要的布局：

查看 Working Fiddle Example!

<强> HTML

<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>

<强> CSS

/* 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;
}

帮助您学习CSS的链接：

Cascading Style Sheets

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

MDN :: CSS - References, Tutorials and Demos

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

2 个答案:

帮助您学习CSS的链接：