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

我在学习socket.io，并且使用它构建了一个聊天应用程序，但是我有问题让应用程序看起来不错或甚至无法使用。使用100％高度和宽度制作应用程序的CSS

我在网上搜索一些术语，但似乎在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; 
}

但这仍显示在浏览器（谷歌浏览器），也是形式是然后在面板顶部的滚动条。我希望表单位于面板的底部，上面的消息可以滚动。

小提琴

http://www.bootply.com/hESm7L5klV

来源

2015-10-28 Jack

您可以添加更多的CSS您的问题或recreat上的jsfiddle的问题？ –

@SamWillis我正在使用的唯一自定义CSS已包含在内，剩下的只是Bootstrap。我会添加一个小提琴。 – Jack

@SamWillis更新。 – Jack

margin-bottom上.pannel是推动你的高度进一步降低保证金从高度-excluded等被添加到100vh你已经设置。

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

来源

2015-10-28 10:07:22

我没有设置'margin：bottom'，所以猜测是由Bootstrap完成的。答案是什么？ – Jack

只需将'margin-bottom：0;'添加到类：'.panel'中，您已经在其中设置了'height：100vh' –

谢谢！你知道第二个问题吗？当我添加自定义CSS时，表单会弹出到顶部，默认情况下在Bootstrap中位于底部。我不知道要使用什么CSS，或者我会在哪里找到它？ – Jack

可滚动的内容，但其余的固定：

.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

来源

2015-10-28 10:17:13 Tim

如果只有消息容器应滚动，你需要溢出，是的。 – Tim

你的小提琴在浏览器下滚动... – Jack

不再;-) – Tim

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

回答

相关问题