javascript - 使用css如何將一個小盒子始終固定在大盒子的底部，大盒子高度為100%，請教。
問題描述
![圖片上傳中...]
問題解答
回答1：.box { position: absolute; top: 0; left: 0;}/* 或者 */.wrapper { display: flex; align-items: flex-end;}回答2：
看下我有沒有猜錯你的意思；
<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>
這里你可以讓wrapper和content的高度一樣，也就是position都為relative，refresh這里使用float，然后設定好寬高。因為refresh這里已經脫離了文檔流，所以不會影響wrapper的高度，container設定為overflow：hidden。 當你往上拉過頭的時候，refresh會自然而然的上來。不知道這樣行不行。
回答3：最無腦的是用position:absolute實現：
<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>
*要注意的是，大盒子也要設置position，小盒子的position才知道是和誰去對比，如果父級節點找不到position它會繼續向上找直到找到有position的DOM節點
回答4：固定高度+margin負值
回答5：大的p絕對定位 小的p 相對定位 bottom 為0 不就可以了嗎
網公網安備