如何使一个 div 显示在最下面

结构如下：
<div id="A">
   <div id="b1">...</div>
   <div id="b2">...</div>
   <div id="b3">...</div>
</div>
我想要 b3 显示在 A 的最下边，紧帖 A 的下边框，

我试过这样的代码：
<div id="b3" style="border:solid; display:block; position:absolute; bottom:1%; z-index:9999">
b3确实显示在我要的位置上了，

可是由于b2的内容太多，设置成了可以滚动的，
b3 总是显示在b2的某行文字上面，
能不能让b3 挤开 b2 的内容呢，


实际情况比我描述的复杂，是在一些xsl文件中实现这些的，所以难免有描述不详的地方，

15 个解决方案

#1

<div id="b3" style="border:solid; display:block;  position:absolute;  bottom:1%; z-index:9999">

去掉红色部分试看,不OK再去掉兰色部分看,

#2

按照我理解楼主的描述，按照1楼的说法去做就行了。
如果lz是想要其他效果，那么请描述更详细一点。

#3

b2设置padding-bottom:30px;  

#4

试过了，没成功，
b3 直接显示在 b1 下面了，还是盖着 b2 的一行（第一行），


以下内容都是一个web程序的片段

b2 的内容是这样的：
<xsl:template match="page[@type = 'xxxx']">   
  <div id="b2">
    .....
  </div>     
</xsl:template>


而 A, b1, b3：
<div id="A">
  <div id="b1">...</div>
  <div id="b3">...</div>
</div>
是这样定义的，

我不知道b2 是怎么加到A 里面去的，（还在看代码找呢，不知道大家有没有什么提示）
只是在客户端看到 dom 里，
A, b1,b2,b3 的关系是1楼描述的那样

另外，从程序中找到的，
css 定义：
#A {
  position: absolute;
  left: 275px;
  top: 7px;
}

#b1 {
  color: #606060;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20px;
}

#b2{
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  bottom: 0; 
  left: 0;
  right: 0;
}

#5

很明显，b2也是用绝对定位，当然会跟b1或b3重叠起来。如果lz想b1 b2 b3是并列显示，去掉绝对定位就行了，或者b1 b2 b3同时绝对定位，然后他它们设置好top属性的值，使三者看起来是并列显示的。

position: absolute; 这句就是绝对定位。

#6

b3 是我后来加的，
b1, 和 b2 是原来程序就有的，

b1原来和 b2 没有重叠，

更奇怪的是，
即使我把 b1 注释掉了，
dom里都没有b1 了，
可是 b2 的位置还是没有变化，
还是上面空了1行（原来b1占的位置），

#7

引用 6 楼 zxw0521 的回复:

b3 是我后来加的，
b1, 和 b2 是原来程序就有的，

b1原来和 b2 没有重叠，

更奇怪的是，
即使我把 b1 注释掉了，
dom里都没有b1 了，
可是 b2 的位置还是没有变化，
还是上面空了1行（原来b1占的位置），

看了你的话，感觉还没弄懂我的意思。“绝对定位”这个名词了解了吗？

#8

引用 7 楼 natici 的回复:

引用 6 楼 zxw0521 的回复:
b3 是我后来加的，
b1, 和 b2 是原来程序就有的，

b1原来和 b2 没有重叠，

更奇怪的是，
即使我把 b1 注释掉了，
dom里都没有b1 了，
可是 b2 的位置还是没有变化，
还是上面空了1行（原来b1占的位置），

看了你的话，感觉还没弄懂我的意思。“绝对定位”这个名词了解了吗？

我是w3 school 自学 还没成材，，
赶紧再复习下去

#9

又看了一下，还是有些不明白：
#b2{
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  bottom: 0; 
  left: 0;
  right: 0;
}
中，
  top: 0;
  bottom: 0; 
  left: 0;
  right: 0;

说的是 b2 相对于 A 的位置吧，
那么 b2是如何在前面空出一行来的，

我改了 b2的 bottom:30;
结果 b2 从 A 中溢出了，

css 的教程，我只找到了 w3school上的，不知道哪里还有更详细的，麻烦推荐下

#10

http://www.w3school.com.cn/css/css_positioning_absolute.asp
这里看看，实在看不懂的话，我再说说我的理解看能否帮助你。

#11

我就是看的这里，
上面的讲解和例子我感觉也懂了的，
但是到我实际用的时候，就有些不明白了，
主要是这个地方：
#b2{
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  bottom: 0; 
  left: 0;
  right: 0;
}

就我的理解，说的是 b2 会直接从 A 最左上角就开始显示了，
可是现在确多了一个 b1的位置出来，
比较不解，

还有我修改了 bottom:30;却让b2 从A中溢出了，。。。

#12

我在本地测试，没发现你说的多了一个 b1的位置出来。能否把你源码贴出来看看？

#13

整个工程太大，
只贴一部分我也找不到关键的，
既然您哪里没有多出这个位置来，
估计是我的代码里有其它地方改了这个东西吧，

我把b2 改成了
#documents {
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: %0;
  bottom: 5%;
  left: 0%;
  right: 0%;
}

b3是(inline的):
style="border:solid; display:block; position:absolute; bottom:1%; z-index:9999"
这时候，b3 确实可以不遮盖b2 了，

这个百分比的写法，
如果页面缩的很小的时候，b3 又开始遮盖b2 了，

所以我想写成固定象素的，
#documents {
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  bottom: 45; 
  left: 0;
  right: 0;
}
但是b2 从 里面溢出了，
我后面改的这个有什么问题吗

#14

突然发现，
我犯了个忌讳，，
一个帖子里，一个问题接一个问题的，
这个帖子结了吧，新开一帖，专心处理13楼的问题，

#15

请在新帖中回答，谢谢，
http://topic.csdn.net/u/20100819/16/c1b76ebe-f0f5-4b04-ae88-b4ef6443aa8d.html