![Picture uploading...]
漂亮男人2017-06-13 09:25:37
.box {
position: absolute;
top: 0;
left: 0;
}
/* 或者 */
.wrapper {
display: flex;
align-items: flex-end;
}
三叔2017-06-13 09:25:37
Let’s see if I guessed what you meant wrong;
<p class="container"> //大容器100%
<p class="wrapper">
<p class="content"></p>//内容区域
<p class="refresh"></p> //小盒子显示的上拉状态
</p> //滚动区域
<p class="scrollBox">
<p class="bar"></p>
</p>//我是滚动条
</p>
<style>
.container{
position:relative;
height:100%;
overflow:hidden;
/*.....*/
}
.wrapper{
position:relative;
height:auto;
/*.....*/
}
.content{
position:relative;
height:auto;
/*....*/
}
.refresh{
position:relative;
float : left;
width:100%;
height:40px;
/*......*/
}
.scrollBox{
position:absolute;
height:100%;
right:0px;
top:0px;
/*因为scrollBox的父元素是container，而且改变的是content，所以这里不会发生改变*/
}
.bar{
position:relative;
height : /*通过js计算并更新*/;
}
</style>
Here you can make the height of wrapper and content the same, that is, the position is relative, use float here in refresh, and then set the width and height. Because refresh has been separated from the document flow, it will not affect the height of the wrapper, and the container is set to overflow: hidden. When you pull it up too far, refresh will come up naturally. I don't know if this will work.
ringa_lee2017-06-13 09:25:37
The most brainless thing is to use position:absolute to achieve:
<body style='margin: 0;font-size: 36px;'>
<p id='bigbox' style='position: absolute;width: 100%;height: 100%;background-color: rgba(0,0,0,0.2);'>
<span>大盒子</span>
<p id='smallbox' style='position: absolute;width: 500px;height: 500px;background-color: red;bottom: 0;'>
<span>小盒子</span>
</p>
</p>
</body>
*It should be noted that the big box also needs to set the position. Only the position of the small box will know who to compare with. If the parent node cannot find the position, it will continue to search upward until it finds the DOM node with the position
阿神2017-06-13 09:25:37
A large p is positioned absolutely, a small p is positioned relatively, and the bottom is 0. Isn’t it ok