使用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

回答

相關問題