所以我正在尝试制作一个IRC聊天网站
所以这部分显示了消息
没问题。
<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>
然后我实现了文本输入，它将文本作为新消息的输入并将其固定到底部。但问题是当没有消息增加时占用整个页面并且最新消息隐藏在此搜索栏后面这里是下一个搜索栏的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;在搜索栏上方添加滚动。
我该如何实现它。
答案 0 :(得分：1)
如何向身体和底部添加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>
答案 1 :(得分：1)
calc() 您可以在下面的演示中看到两个<div>相对定位且高度固定
上方<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>