Question

我想将一个textarea放在div的底部（并在那里固定）：

<div id=msg>

 <div id=content>
     aaaaaaaannnnnnnnnn<br>
     aaaaaaaannnnnnnnnn<br>
     aaaaaaaannnnnnnnnn<br>
 </div>

 <div id=text>
  <textarea></textarea>
 </div>

</div>

CSS

#msg{
 width:60%;
 height:500px;
 float:left;
 background-color:#fff;
 border:1px solid #000;
}
#content{
overflow-y: auto;
}
#text{
 bottom:0;
position:fixed;
}

为什么底：0不工作？ http://jsfiddle.net/mu1tynax/

Answer 1

在你的小提琴中，你错过了position: fixed。但是，请注意固定定位是相对于主体，而不是相对父div。

在小提琴中插入位置即可。

Answer 2

添加

position:relative;

到#msg

和

position:absolute;

到#text

我已经为您更新了JSFiddle：https://jsfiddle.net/mu1tynax/5/

信用到：Align Div at bottom on main Div

Answer 3

您需要在＆＃34; text＆＃34;中将位置设置为绝对值。 div，但也在父div中将位置设置为relative。 Fiddle

#msg{
 width:60%;
 height:500px;
 float:left;
 background-color:#fff;
 border:1px solid #000;
 overflow-y: auto;
    position: relative;
}
#text{
    position: absolute;
 bottom:0;
}

有关定位元素（绝对）的更多信息，请访问：https://css-tricks.com/absolute-positioning-inside-relative-positioning/

textarea固定在div的底部 - CSS

3 个答案: