简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
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中文网
PHP中文网 2017-06-13 09:23:37
0
5
1757

![Picture uploading...]

PHP中文网
PHP中文网

认证高级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>//内容区域
        <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.

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
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-13 09:25:37 2 floor

Fixed height + negative margin

Like +0
Add Reply
阿神
阿神2017-06-13 09:25:37 1 floor

A large p is positioned absolutely, a small p is positioned relatively, and the bottom is 0. Isn’t it ok

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！