javascript - Comment utiliser CSS pour toujours fixer une petite boîte au bas d'une grande boîte et que la hauteur de la grande boîte est de 100%, donnez-moi quelques conseils.
![Téléchargement de la photo...]
Maison > Questions et réponses > le corps du texte
![Téléchargement de la photo...]
漂亮男人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
Voyons si j’ai mal compris ce que vous vouliez dire ;
<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>
Ici, vous pouvez rendre la hauteur du wrapper et du contenu identique, c'est-à-dire que la position est relative, utilisez float ici lors de l'actualisation, puis définissez la largeur et la hauteur. Étant donné que l'actualisation a été séparée du flux de documents, elle n'affectera pas la hauteur du wrapper et le conteneur est défini sur overflow: caché. Lorsque vous le tirez trop loin, l'actualisation apparaîtra naturellement. Je ne sais pas si cela fonctionnera.
ringa_lee2017-06-13 09:25:37
La chose la plus stupide est d'utiliser position:absolute pour réaliser :
<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>
*Il est à noter que la position de la grande boîte doit également être définie. Seule la position de la petite boîte saura avec qui comparer. Si le nœud parent ne trouve pas la position, il continuera à chercher vers le haut jusqu'à ce qu'il trouve. le nœud DOM avec position
阿神2017-06-13 09:25:37
Un grand p est positionné de manière absolue, un petit p est positionné de manière relative et le bas est 0. N'est-ce pas ok