Question

晚上好，我的代码有这个简单的问题：我有一个div（它的位置是相对的）我添加了适当的＆＃34;滚动＆＃34;在我的CSS上，但它不起作用！这是我的代码：

HTML

<div class="wrapper">
    <div id ="wrapper" class="container">
        <div class="left">
        <div class="top">
            <input id="receiver" type="text" / placeholder= "To:">
            <span class = "error" id ="receiver_check"> </span>
        </div>
        <ul class="people" id="people">

        </ul>
    </div>
    <div id="right" class="right">
        <div class="write">
            <input id="message" class="message" type="text" />
            <input type="button" id="send-button" class="write-link send">
        </div>
    </div>

</div>

CSS

.container .right {
position: relative;
float: left;
width: 62.4%;
height: 100%;
overflow-y: scroll !important;
}

.container .right .chat {
position: relative;
display: none;
padding: 0 35px 92px;
border-width: 1px 1px 1px 0;
border-style: solid;
border-color: #e6e6e6;
height: -moz-calc(100% - 48px);
height: -webkit-calc(100% - 48px);
height: -o-calc(100% - 48px);
height: calc(100% - 48px);
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-flex-direction: column;
flex-direction: column;
overflow-y: scroll !important;
}
.container .right .chat.active-chat {
display: block;
display: -webkit-flex;
display: flex;
overflow-y: scroll !important;
}

我使用这个div来显示聊天，所以当我添加类＆＃34; active＆＃34;时，内容会显示在div中。

我总是在容器内：

.container .right .write {
  position: absolute;
  bottom: 20px;
  left: 30px;
  height: 42px;
  padding-left: 8px;
  border: 1px solid #e6e6e6;
  background-color: #eceff1;
  width: -moz-calc(100% - 58px);
  width: -webkit-calc(100% - 58px);
  width: -o-calc(100% - 58px);
  width: calc(100% - 58px);
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 }
.container .right .write input#receiver {
font-size: 16px;
float: left;
width: 347px;
height: 40px;
padding: 0 5px;
color: #1a1a1a;
border: 0;
outline: none;
background-color: #eceff1;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
}

.container .right .write #send-button {
 display: inline-block;
 float: left;
 width: 20px;
 height: 42px;
 margin-left: 11px;
 content: '';
 background-image: url("http://s30.postimg.org/nz9dho0pp/send.png");
 background-repeat: no-repeat;
 background-position: center;
 }

非常感谢你的帮助 ELE

Answer 1

如果显示页面底部的set "variable=value"是您的要求，则必须将div初始位置置于底部负值，并将其置于活动类

CSS：滚动没有工作和高度设置

1 个答案: