将两个div修复到另一个div的底部和顶部

Question

我希望将两个div修复到另一个div的底部和顶部。

Fiddle

<div id="subG">
    <div id="subUp"> TTTTT </div> //This to be fixed on top of this parent div
    <div id="subGH"> 
        <img src="">
    </div>
    <div id="subDwn"> BBBB </div> //This to be fixed at the bottom of this parent div
</div>

的CSS：

#subG{
    height: 100px;
    overflow: hidden;
    overflow-x: hidden;
    position: relative;
}
#subGH{
    height: 99%;
    position: absolute;
    overflow: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: -15px;
}
#subUp #subDwn{
    position: relative;
}

所以决赛将是这样的：

Answer 1

试试这个你正在寻找的演示。 Demo

@receiver(pre_delete, sender=User)
def user_delete_handler(sender, instance, **kwargs):
    # stop delete then do the following
    instance.userprofile.deleted_user = True  # edit linked model to mark user as deleted
    instance.userprofile.save()  # save linked model

Answer 2

请尝试以下操作： Demo

尝试使用class代替ID，以便在页面中重复使用相同的样式

CSS：

.subG {
    height: 100px;
    overflow: hidden;
    overflow-x: hidden;
    position: relative;
    width:150px;
}
.subUp, .subDwn {
    height: 20px;
    display:block;
    width:100%;
    background-color:#ccc;
}
.subGH {
    display:block;
    background-color:yellow;
    height: 60px;
     overflow: auto;
       right: -15px;    
    position: relative;
}
.subGH img {
    width:100%;  
}

HTML：

<div class="subG">
    <div class="subUp">TTTTT</div>
    <div class="subGH">
        <img src="http://pngimg.com/upload/small/kettle_PNG8730.png" />
    </div>
    <div class="subDwn">BBBB</div>
</div>

Answer 3

我认为这就是你想要的：

＆＃13;

＆＃13;

#subG {
    height: 100px;
    position: relative;
}
#subGH {
    bottom: 0;
    height: 99%;
    left: 0;
    overflow-y: scroll;
    position: relative;
    right: 5px;
    top: 0;
}
#subUp, #subDwn {
    background-color: #ccc;
    position: relative;
    text-align: center;
}
#subDwn {
    bottom: 0;
}

＆＃13;

use mouse wheel over this image
<div id="subG">
    <div id="subUp"> TTTTT </div> 
    <div id="subGH"> 
        <img src="http://img42.com/lwZZW+">
    </div>
    <div id="subDwn"> BBBB </div> 
</div>

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。