所以這部分顯示了消息

這沒有問題。

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-12" > 

    <div id="result" > 

     <% msg.forEach((message) =>{ %> 
     <h4> 
      <%= message.name %> 
      </h4> 
      <p> 
      <%= message.text %> 
      </p> 
      <% }) %> 

      </div> 
     </div> 
     </div> 
    </div>

然後我實現了文本輸入，將文本作爲新信息輸入和固定它bottom.But問題是，當沒有消息增加它佔據整個頁面，最新的消息是隱藏這背後的搜索酒吧這裏是EJS的下一部分的搜索欄

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-12"> 
<div class=style="position:fixed; width:100% "> 
     <form action="/newMessage" method="POST"> 
      <div class="form-group"> 
      <input type="text" name="txtmsg" class="form-control"> 
      </div> 
     </form> 
    </div> 
</div> 
</div> 
</div> 
</div>

即使通過在消息中使用overflow:auto;添加滾動以上檢索算法吧。

我該如何實現它。

來源

2017-07-02 Prashant Bhardwaj

使用`calc()`

您可以在以下兩個<div> s的相對定位與固定高度的演示中看到。
上面的<div>的高度是由calc()計算的，所以它和下面的<div>完美地填滿了窗口的高度。
下面的<div>將始終推到窗口的底部，但從未超過它，上面的<div>可以根據需要添加可滾動內容。

body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
p { 
 
    margin: .5rem .5rem 5rem; 
 
} 
 
#inbox { 
 
    /* 100% of viewer height - height of lower div - combined widths of borders */ 
 
    height: calc(100vh - 5rem - 8px); 
 
    background: lightblue; 
 
    border-bottom: 4px solid white; 
 
    overflow: auto; 
 
} 
 
#outbox { 
 
    height: 5rem; 
 
    background: lightgreen; 
 
    border-top: 4px solid black; 
 
}

<div id="inbox"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div> 
 
<div id="outbox"></div>

來源

2017-07-02 03:12:55

謝謝你，我沒有知道的計算（） –

不客氣。這是CSS的一個強大功能，尤其是與'vh'和'vw'等相關度量結合使用時。沒有更多'

'佈局！ –

如何將100％添加到身體和底部：0到固定元素？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <style> 
    body { 
    height: 100%; 
    } 
    .new-message { 
    bottom:0; 
    position: fixed; 
    } 
    </style> 
</head> 
<body> 

    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12" > 

     <div id="result" > 

      <% msg.forEach((message) =>{ %> 
      <h4> 
      <%= message.name %> 
      </h4> 
      <p> 
      <%= message.text %> 
      </p> 
      <% }) %> 

     </div> 
     </div> 
     <div class="col-md-12 new-message"> 
     <form action="/newMessage" method="POST"> 
      <div class="form-group"> 
      <input type="text" name="txtmsg" class="form-control"> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 

</body> 
</html>

來源

2017-07-02 03:09:53 xxLITxx

相關問題

製作DIV滾動固定位置元素

回答

使用`calc()`

製作DIV滾動固定位置元素

回答

使用calc()

相關問題

使用`calc()`