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>

当前屏幕截图

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

我尝试过使用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）上显示滚动条，然后表单位于面板顶部。我希望表单位于面板的底部，上面的消息可以滚动。

小提琴

http://www.bootply.com/hESm7L5klV

Answer 1

margin-bottom上的{p> .pannel因为边距从高处被排除而进一步向下推高你的高度，因此被添加到你已经设置的100vh上。

只需将margin-bottom: 0;添加到课程中：.panel

Answer 2

对于可滚动内容但固定休息：

.panel {
    margin-bottom: 0;
    min-height: 100vh;
    position: relative;
}
.panel-body {
    max-height: 100vh;
    margin-bottom: -41px; // substract height of panel-footer
    overflow: scroll;
    padding-bottom: 100px;
}
.panel-footer {
    position: absolute;
    bottom: 0;
}

See this fiddle

CSS使用100％的高度和宽度制作应用程序

2 个答案: