固定フォームと重複しないようにしてください

Question

メッセージページの下部には、と固定されたメッセージングページが作成されています。が固定されています。

メッセージは動的に生成され、<li>タグに配置されます。ここで

はHTMLである：ここでは

<ul id="messages" style="overflow:auto;"> 
    <!-- Messages are dynamically added as <li> here --> 
</ul> 

<form action=""> 
     <input id="m" autocomplete="off"/> 
     <button type="submit" name="action">Send</button> 
</form> 

はCSSです：

form {padding: 20px; position: fixed; bottom: 0; width: 80%; } 
form input {color: black; border: 0; padding: 10px; width: 90%; margin-right: .5%; } 
#messages { list-style-type: none; margin: 0; padding: 0; } 
#messages li { padding: 5px 10px; } 
#messages li:nth-child(odd) { background: #eee; } 

何が起こることはメッセージを動的下部に固定されているフォームの上部にオーバーフローを追加しているということです。

メッセージがフォームまで表示され、スクロール可能になるようにします。

どのように私はこれを達成することができます：ここで

は、現在のシナリオのですか？

Answer 1

フォームはデフォルトで透明な背景を持っています。

form { 
    padding: 20px; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    background: red; 
} 

https://jsfiddle.net/f3ukjyce/

しかし、構造本のより良い方法があります。この場合、あなたは、単純な何かを行うことができます。問題は、フォームの後ろに隠されたメッセージが常に残ることです。スクロールされたコンテンツが独自の要素内に含まれ、フォームと重複しないようにこれを再作成する必要があります。

https://jsfiddle.net/f3ukjyce/1/

Answer 2

フレキシボックスのレイアウトを使用してみてください、私は<ul>と<form>周り<div id="container">を追加しました。

#container { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
} 
#messages { 
    overflow: auto; 
} 
form { 
    margin-top: auto; 
} 

jsFiddle

あなたはメッセージが下から上に成長したい場合は、:before擬似要素を追加することができます。

#container { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
} 
#container:before { 
    content: ""; 
    flex: 1; 
} 
#messages { 
    overflow: auto; 
} 

jsFiddle