我正在尝试制作一个内容 slider ,旁边有一个聊天框,底部有一个页脚。
这是我要实现的目标的图表:
以下代码的问题是聊天框是页面的高度。我希望聊天框停在页脚处,这样它就是页面的高度 -60 像素。
这是我目前所拥有的:
body {
margin: 0;
}
.wrapper {
background: #95a5a6;
display: table;
height: 100vh;
width: 100%;
}
.wrapper-inner {
display: table-cell;
padding-left: 300px;
padding-bottom: 60px;
vertical-align: middle;
text-align: center;
}
.chatbox {
background: #bdc3c7;
min-height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
z-index: 2;
}
.footer {
background: #2c3e50;
bottom: 0px;
height: 60px;
position: absolute;
width: 100%;
z-index: 1;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner">Content</div>
</div>
<div class="footer"></div>
最佳答案
这是一个仅使用 flex 和 calc()
的简化版本:
body {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.chatbox {
flex: 0 0 300px;
height: calc(100vh - 60px);
overflow-y: auto;
background-color: #bdc3c7;
}
.content {
flex: 1;
background-color: #95a5a6;
}
.footer {
flex-basis: 100%;
height: 60px;
background: #2c3e50;
}
<div class="chatbox"></div>
<div class="content">Content</div>
<div class="footer"></div>
jsFiddle
关于html - 使用页脚和侧边栏创建 100vh 页面时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42596376/