html - 如何将 float 的图像推送到浏览器窗口的底部？

Question

我的网站中有一张图片是使用以下 CSS 定义的:

#settings_big{
    border: none !important;
    margin: auto 0 0 0 !important;
    padding: 0 !important;
    float: right;
}

由于 float ，图像显然位于内容的右侧。上边距使图像位于内容中最低悬挂元素的正下方。这看起来不错，但我真的更希望图像在浏览器窗口中的位置尽可能低，以便在一定程度上框住内容。我见过多个使用固定定位来实现此目的的示例，这可行，但是我的内容的最大和最小宽度为 960px；使用固定位置

bottom: 0;
right: 0;

使图像被推到内容之外的最右边，到达浏览器窗口的边缘。是否可以在保持

的同时将图像推到浏览器窗口的底部

float: right;

定位？我宁愿不使用 JavaScript 或 jQuery，但我想这是一个选项。提前致谢。

Answer 1

新答案:

<div class="container contentCont">
  <div id="content"></div>
</div>
<div class="container imageCont">
  <div id="image"></div>
</div>

使用 CSS:

.container {
  width: 200px;
  margin: 0 auto;
  background: #ccc;
}

.contentCont {
  min-height: 600px;
}

.imageCont {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}

#image {
  float: right;
  width: 20px;
  height: 20px;
  border: 4px solid red;
}

在这个 JSFiddle 中是否正确:http://jsfiddle.net/WYX7H/1/