国产成人av在线影院,国产成人综合欧美精品久久,久久精品噜噜噜成人av

javascript - How to use css to always fix a small box to the bottom of a large box, and the height of the large box is 100%, please give me some advice.

PHP中文網(wǎng) 2017-06-13 09:23:37

1913

![Picture uploading...]

PHP中文網(wǎng)

認(rèn)證高級PHP講師

reply all(5)

漂亮男人2017-06-13 09:25:37 5 floor

.box {
    position: absolute;
    top: 0;
    left: 0;
}

/* 或者 */
.wrapper {
    display: flex;
    align-items: flex-end;
}

Like +0

Add Reply

三叔2017-06-13 09:25:37 4 floor

Let’s see if I guessed what you meant wrong;

<p class="container"> //大容器100%
    <p class="wrapper">
        <p class="content"></p>//內(nèi)容區(qū)域
        <p class="refresh"></p> //小盒子顯示的上拉狀態(tài)
    </p> //滾動區(qū)域
    <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，所以這里不會發(fā)生改變*/
}

.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.

Like +0

Add Reply

左手右手慢動作2017-06-13 09:25:37 3 floor

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

Like +0

Add Reply