我有一个奇怪的问题,我认为很多其他人以前有过,但我不太确定它有一个好的(纯CSS)解决方案......
我有一个具有以下结构的文档:
BOTTOM本质上是一个背景图像,应坚持到浏览器窗口的底部右侧角球在所有时间.但是,我不想使用absolute相对于文档正文的定位,因为它会在MIDDLE中的文本下流动.
所以基本上我想要的效果与使用绝对定位的效果相同,但我不希望文本或其他元素对它进行排序.它应该表现得就像它没有任何特定的定位,宽度为100%,高度为200px,但始终位于文档的右下角.
我很乐意回答有关这个问题的任何问题,因为我相信你不会理解这个问题.;)
Gor*_*son 18
这是一个非常普遍的问题.解决方案:位置:固定.这就是你所说的,确保项目始终出现在某个位置.使用
position: fixed;
bottom: 0px;
right: 0px;
因此,将始终显示在右下角.idk如果你能用背景图片做到这一点,但这符合你的要求.它在IE 6中不受支持(但那又是什么？).在这里看一个例子.向上和向下滚动页面.请注意图像始终位于浏览器窗口的底部.如果您不希望事物流过,请确保您的z-index足够大.:d
<!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。
存在一个问题，如果页面高度高于 3*200px+middleContentHeight，您将看到绿色和蓝色块之间有白色间隙。通过声明主体的背景颜色可以轻松解决此问题。