html - CSS 使用 100% 的高度和宽度制作 App

Question

我正在学习 socket.io 并使用它构建了一个聊天应用程序，但我无法让该应用程序看起来不错甚至可以使用。

我在网上搜索了一些术语，但在 CSS 中似乎每个问题都有 100 种可能的解决方案，所以我不确定哪种方法是解决我的问题的最佳方法，有些方法非常古老，现在有更好/更简单的选择等等

当前 HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Chat</h3>
        </div>
        <div class="panel-body">
          <ul id="messages"></ul>
        </div>
        <form>
          <div class="input-group">
            <input type="text" class="form-control" id="message" placeholder="Message" />
            <span class="input-group-btn">
              <button type="button" class="btn btn-primary" id="send">Send</button>
            </span>
          </div>
        </form>
      </div>
    </div>
    <div class="col-md-2">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Users</h3>
        </div>
        <div class="panel-body">
          <div class="list-group" id="users"></div>
        </div>
      </div>
    </div>
  </div>
</div>

当前截图

我希望这两个面板不会在用户浏览器下方滚动，即当面板到达浏览器边缘时，滚动应该发生在面板内部而不是在用户浏览器下方。

我试过使用 CSS:

.panel {
    height: 100vh;
    max-height: 100vh;
    position: relative;
}
.panel-body {
    overflow: auto;
    position: absolute;
    top: 40px;
    bottom: 15px;
    left: 0;
    right: 0;
}

但这仍然会在浏览器 (Google Chrome) 上显示一个滚动条，并且表单会位于面板的顶部。我希望表单位于面板的底部，并且上面的消息可以滚动。

fiddle

http://www.bootply.com/hESm7L5klV

Answer 1

.pannel 上的

margin-bottom 将你的高度进一步降低，因为 margin 被排除在高度之外，因此被添加到 100vh 你已经设置好了。

只需将 margin-bottom: 0; 添加到类:.panel