CSS使容器DIV涵蓋整頁

我想這個模板（https://codepen.io/drehimself/pen/KdXwxR），以便轉換：CSS使容器DIV涵蓋整頁

1）容器DIV的高度和寬度爲100％。

2）如果成員列表超出屏幕大小，則會出現一個垂直滾動條，以便用戶可以滾動瀏覽成員列表的其餘部分。

3）最後，用戶輸入消息的textarea應該始終可見。目前用戶必須向下滾動才能看到textarea。

我已經成功地做到了第一點，但沒能完成第2點和3

是否有人可以幫忙嗎？

這裏是我的叉子鏈接https://codepen.io/phantom007/pen/GmdVRm

@import url(https://fonts.googleapis.com/css?family=Lato:400,700); 
*, *:before, *:after { 
    box-sizing: border-box; 
} 

body { 
    background: #C5DDEB; 
    font: 14px/20px "Lato", Arial, sans-serif; 
    padding: 0; 
    color: white; 
} 

.container { 
    margin: 0 auto; 
    width: auto; 
    background: #444753; 
    border-radius: 5px; 
} 

.people-list { 
    width: 260px; 
    float: left; 
} 
.people-list .search { 
    padding: 20px; 
} 
.people-list input { 
    border-radius: 3px; 
    border: none; 
    padding: 14px; 
    color: white; 
    background: #6A6C75; 
    width: 90%; 
    font-size: 14px; 
} 
.people-list .fa-search { 
    position: relative; 
    left: -25px; 
} 
.people-list ul { 
    padding: 20px; 
    height: 770px; 
} 
.people-list ul li { 
    padding-bottom: 20px; 
} 
.people-list img { 
    float: left; 
} 
.people-list .about { 
    float: left; 
    margin-top: 8px; 
} 
.people-list .about { 
    padding-left: 8px; 
} 
.people-list .status { 
    color: #92959E; 
} 

.chat { 
    width: auto; 
    float: left; 
    background: #F2F5F8; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    color: #434651; 
} 
.chat .chat-header { 
    padding: 20px; 
    border-bottom: 2px solid white; 
} 
.chat .chat-header img { 
    float: left; 
} 
.chat .chat-header .chat-about { 
    float: left; 
    padding-left: 10px; 
    margin-top: 6px; 
} 
.chat .chat-header .chat-with { 
    font-weight: bold; 
    font-size: 16px; 
} 
.chat .chat-header .chat-num-messages { 
    color: #92959E; 
} 
.chat .chat-header .fa-star { 
    float: right; 
    color: #D8DADF; 
    font-size: 20px; 
    margin-top: 12px; 
} 
.chat .chat-history { 
    padding: 30px 30px 20px; 
    border-bottom: 2px solid white; 
    overflow-y: scroll; 
    height: 575px; 
} 
.chat .chat-history .message-data { 
    margin-bottom: 15px; 
} 
.chat .chat-history .message-data-time { 
    color: #a8aab1; 
    padding-left: 6px; 
} 
.chat .chat-history .message { 
    color: white; 
    padding: 18px 20px; 
    line-height: 26px; 
    font-size: 16px; 
    border-radius: 7px; 
    margin-bottom: 30px; 
    width: 90%; 
    position: relative; 
} 
.chat .chat-history .message:after { 
    bottom: 100%; 
    left: 7%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    border-bottom-color: #86BB71; 
    border-width: 10px; 
    margin-left: -10px; 
} 
.chat .chat-history .my-message { 
    background: #86BB71; 
} 
.chat .chat-history .other-message { 
    background: #94C2ED; 
} 
.chat .chat-history .other-message:after { 
    border-bottom-color: #94C2ED; 
    left: 93%; 
} 
.chat .chat-message { 
    padding: 30px; 
} 
.chat .chat-message textarea { 
    width: 100%; 
    border: none; 
    padding: 10px 20px; 
    font: 14px/22px "Lato", Arial, sans-serif; 
    margin-bottom: 10px; 
    border-radius: 5px; 
    resize: none; 
} 
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o { 
    font-size: 16px; 
    color: gray; 
    cursor: pointer; 
} 
.chat .chat-message button { 
    float: right; 
    color: #94C2ED; 
    font-size: 16px; 
    text-transform: uppercase; 
    border: none; 
    cursor: pointer; 
    font-weight: bold; 
    background: #F2F5F8; 
} 
.chat .chat-message button:hover { 
    color: #75b1e8; 
} 

.online, .offline, .me { 
    margin-right: 3px; 
    font-size: 10px; 
} 

.online { 
    color: #86BB71; 
} 

.offline { 
    color: #cccccc; 
} 

.busy { 
    color: #E38968; 
} 

.me { 
    color: #94C2ED; 
} 

.align-left { 
    text-align: left; 
} 

.align-right { 
    text-align: right; 
} 

.float-right { 
    float: right; 
} 

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
}

在此先感謝

來源

2017-05-14 Phantom007

這樣做：

.chat .chat-history { 
    height: calc(100vh - 278px); 
    overflow-y: auto; 
} 
.people-list { 
    height: 100vh; 
    overflow-y: auto; 
}

更新codepen：https://codepen.io/anon/pen/BRxXmV

來源

2017-05-14 10:03:45

真棒！謝謝 – Phantom007

CSS使容器DIV涵蓋整頁

回答

相關問題