CSS：滚动不起作用，并且设置了高度

Question

Good evening, I have this simple problem with my code: I have a div (whose position is relative) and I have added the propriety "scroll" on my CSS but it doesn't work! Here it is my code:

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;
}

I use this div for showing a chat, so the content is shown inside the div when I add the class "active"

Inside the container I always have :

.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;
 }

thank you very much for your help ele

Answer 1

如果您需要从页面底部显示div ，则必须将div绝对初始位置设置为最底端的负值，并在活动课堂上使其为正