1

我正在尝试创建一个简单的布局，其中有：

标题

内容（此处为图片）

页脚

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

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

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

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

提前致谢， Takashi

4

2 回答 2

0

使用带有 css 的百分比可能是一个解决方案：http: //jsfiddle.net/rgv2e/

于 2012-06-07T21:03:42.653 回答
0

您真的应该尝试做事并从错误中学习。尽管如此，这是您所追求的布局：

请参阅此 工作小提琴示例！

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 的链接：

层叠样式表

级联样式表第 2 级修订版 1 (CSS 2.1) 规范

MDN :: CSS - 参考、教程和演示

于 2012-06-07T21:44:07.310 回答