HTML要素は底に置かれていません

私はチャットUIを持っています。メッセージはボックスに入り、メッセージボックスの下部にテキスト入力要素があります。最初はうまくいきますが、一度十分なメッセージが表示されると、テキスト入力要素はメッセージと共にスクロールアップされ、下部に配置されません。これどうやってするの？どんな有用な考えも認められるだろう。ここでHTML要素は底に置かれていません

<html> 
<body> 
<div id="chatui"> 
<div id="chatmsgs"></div> 
<input type="text" id="chatbox"> 
</div> 
</body> 
</html>

は私のCSSです：ここでは

#chatui { 
    z-index:3; 
    position:absolute; 
    bottom:5px; 
    width: 380px; 
    height: 150px; 
    border: 3px solid #8AC007; 
    margin-left:5px; 
    overflow:auto; 
    } 
#chatbox {bottom:3px;position:absolute;width:378px;} 
#chatmsgs {position:absolute;}

は私のJavascriptです：

これはちょうどあなたが「chatmsgsに入力したテキストを表示するには、キーボードの "Enter" を押したときに言います"div。

$(window).keydown(function(e){ 
if (e.keyCode == 13) { 
if (document.activeElement.id == 'chatbox') { 
var msg = document.getElementById('chatbox').value; 
document.getElementById('chatbox').value = ''; 
var ms = '<p>'+msg+'</p>'; 
$('#chatmsgs').append(ms); 
} 
} 
});

私が何を言っているかを確認するには、このバイオリンをチェックアウト： https://jsfiddle.net/ev3uymw6/

出典

2016-04-06 Konrad

あなたはそれがchatuiのサイズを超えて成長しないように、chatmsgs DIVにoverflow:autoし、適切なheightを追加する必要がありますそれを全部スクロールさせてください。

$(window).keydown(function(e) { 
 
    if (e.keyCode == 13) { 
 
    if (document.activeElement.id == 'chatbox') { 
 
     var msg = document.getElementById('chatbox').value; 
 
     document.getElementById('chatbox').value = ''; 
 
     var ms = '<p>' + msg + '</p>'; 
 
     $('#chatmsgs').append(ms); 
 
    } 
 
    } 
 
});

#chatui { 
 
    z-index: 3; 
 
    position: absolute; 
 
    bottom: 5px; 
 
    width: 380px; 
 
    height: 150px; 
 
    border: 3px solid #8AC007; 
 
    margin-left: 5px; 
 
} 
 
#chatbox { 
 
    bottom: 3px; 
 
    position: absolute; 
 
    width: 378px; 
 
} 
 
#chatmsgs { 
 
    position: absolute; 
 
    height: 130px; 
 
    overflow: auto; 
 
    width: 378px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="chatui"> 
 
    <div id="chatmsgs"> 
 
    </div> 
 
    <input type="text" id="chatbox"> 
 
    </div> 
 
</body>

出典

2016-04-06 18:51:21 sabithpocker

HTML要素は底に置かれていません

答えて

関連する問題