所以这部分显示了消息

这没有问题。

<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()`