防止與底部的固定形式重疊

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

嘗試使用Flexbox的佈局，我加了一個<div id="container">的<ul>和<form>左右。

#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