代码之家 › 专栏 › 技术社区 › Deniz Dogan

图片贴在文档的右下角

css html

Deniz Dogan · 技术社区 · 15 年前

我有一个特殊的问题,我认为很多人以前也有过,但我不确定是否有一个好的(纯CSS)解决方案…

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

顶部:100%宽,200px高
中间:100%宽,高度可变
底部:100%宽,200px高

底部基本上是一个背景图像,应该贴在浏览器窗口的右下角。 在任何时候 . 但是,我不想使用 absolute 相对于文档正文的位置,因为它将在中间的文本下流动。

所以基本上我想要和使用绝对定位时一样的效果,但我不希望文本或其他元素在上面流动。它应该表现得好像没有任何特定的位置,宽度100%,高度200px, 但总是在文档的右下方 .

我很乐意回答有关这个问题的任何问题,因为我相信你不会理解。;)

6 回复 | 直到 11 年前

dlamblin 15 年前

<!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、consecttur adipiscing elit、sed do eiusmod tempor incidedunt ut labore et dolore magna aliqua。如果是最小的鹿肉,那么诺斯特鲁德的实验室就不需要支付任何费用。在巴黎的富家大教堂里,有一只可爱的海豚。除了西方国家以外,丘比特人没有胆怯,他们在工作中表现得很好。洛雷姆·伊普索姆·多尔坐在阿米特的座位上,他是一位非常优秀的运动员,他是一位非常出色的速度运动员,他在拉伯和多洛尔·马格纳·阿利夸尔的比赛中发挥了重要作用。如果是最小的鹿肉,那么诺斯特鲁德的实验室就不需要支付任何费用。在巴黎的富家大教堂里,有一只可爱的海豚。除了西方国家以外,丘比特人没有胆怯,他们在工作中表现得很好。

如果页面高度高于3*200px+MiddleContentHeight,则会出现绿色和蓝色块之间的空白。这很容易通过声明主体的背景色来解决。

Gordon Gustafson 15 年前

这是一个很常见的问题。解决方案:位置:固定。这就是你所说的,确保物品总是出现在某个位置。使用

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

所以总是出现在右下角。IDK如果你可以用背景图像来做,但这符合你的要求。它在IE 6中不受支持(但又是什么?)见 here for an example .上下滚动页面。请注意图像如何始终位于浏览器窗口的底部。另外,如果你不想让事情经过Z索引,请确保Z索引足够大。:d

Sampson 15 年前

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

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

Peter 15 年前

如果我正确理解您的意思,请使用以下CSS将其置于右侧,并始终位于底部:

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

这就是你想要达到的目标吗?

casademora 15 年前

要添加到@stevendbrown的答案中,请执行以下操作:

.bottom { z-index: 2; }

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

Net Dawg 11 年前

我只是把图像嵌入到文本中。

更具体地说,我使用的是卷纸机,只是把图片拖到我想要的地方。然后,我查看了源代码,发现图像标记只是被简单地移动到DIV元素中某个明显任意的位置。

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

我意识到这在数学上并不精确。但希望这个解决方案能提供另一个视角,至少,对于其他答案(我不能为自己工作)。在CSS中,似乎没有任何东西可以在文本换行时将元素推到段落的“底部、右侧”。