Question

我有一个奇怪的问题，我认为很多其他人以前都有，但我不太确定它有一个好的（纯CSS）解决方案......

我有一份具有以下结构的文件：

TOP：100％宽，200px高
MIDDLE：100％宽，可变高度
底部：100％宽，200px高

BOTTOM本质上是一个背景图片，应始终粘贴在浏览器窗口的右下角。但是，我不想相对于文档正文使用absolute定位，因为它会在MIDDLE中的文本下流动。

所以基本上我想要的效果与使用绝对定位的效果相同，但我不希望文本或其他元素对它进行排序。它应该表现得就像它没有任何特定的定位，宽度为100％，高度为200px，但始终位于文档的右下角。

我很乐意回答有关此问题的任何问题，因为我相信您不会理解这一点。 ;）

Answer 1

这是一个非常常见的问题。解决方案：位置：固定。这就是你所说的，确保项目始终出现在某个位置。使用

position: fixed;
bottom: 0px;
right: 0px;

所以总是出现在右下角。 idk如果你能用背景图片做到这一点，但这符合你的要求。它在IE 6中不受支持（但那又是什么？）。见here for an example。向上和向下滚动页面。请注意图像始终位于浏览器窗口的底部。如果您不希望事物流过，请确保您的z-index足够大。：d

Answer 2

<!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>test bottom right fixture</title>
    </head>
    <style type="text/css">
    body{margin: 0;}
    #top,#middle,#bottom{width:100%;}
    #top,#bottom{height:200px;}
    #middle{padding-bottom: 200px;}
    #bottom{position: fixed;right:0;bottom:0;}
    .red{background-color: red;}
    .green{background-color: green;}
    .blue{background-color: blue;}
    </style>
    <body>
    <div id="top" class="red">
      Lorem ipsum dolor sit amet
    </div>
    <div id="middle" class="green">
      Lorem ipsum dolor sit amet
    </div>
    <div id="bottom" class="blue">
      Lorem ipsum dolor sit amet
    </div>
    </body>
</html>

这适用于所示的短中间内容，或更详细的中间内容，如：Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in repreptderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。 Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in repreptderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。

如果页面高度高于3 * 200px + middleContentHeight，则会出现绿色和蓝色块之间出现白色间隙的问题。通过声明身体的背景颜色可以很容易地解决这个问题。

Answer 3

<img src="beta.jpg" class="specialImage" />

.specialImage{
  position:fixed;
  bottom:0;
  right:0;
  z-index:100; /* or higher/lower depending on other elements */
}

Answer 4

如果我理解正确，请使用以下CSS将其放在右侧并始终位于底部：

.bottom{
   position: relative;
   bottom: 0;
   float: right;
}

这就是你想要完成的事情吗？

Answer 5

要添加@stevedbrown的答案：

.bottom { z-index: 2; }

其中2，只是比其他页面元素更高的z索引

Answer 6

我只是将图像嵌入文本中。

更具体地说，我正在使用CKEditor，只是将图像拖到我想要的位置。然后，我查看源代码，发现图像标记只是简单地移动到div元素中一些明显的任意位置。

<div>Lorem ipsum dolor sit <img src="sunset.jpg" style="position:relative;float:right; padding:3px;" />per seacula futurum.</div>

我意识到这在数学上并不准确。但希望这个解决方案提供另一个视角，至少是其他答案 - （我无法为我工作）。 CSS中似乎没有任何内容可以在将文本环绕时将元素推向para的“bottom，right”。

CSS：图像粘贴在文档的右下角

6 个答案: