javascript - CSS 和 jQuery 调整大小问题

Question

我正在尝试创建一个可调整大小的聊天框。我几乎拥有它，除了当我调整大小时底部部分分离，并且我无法将 userList 设置为固定大小，这不会受到调整大小的影响。

jsbin .

HTML:

  <div id="chatWindow">
    <div id="dragBar"></div>
    <div id="container">
      <div class="content">
      <p>aici vine niste text</p></div>
      <div class="content">
      <p>aici vine niste text</p></div>
    </div>

    <div id="usersList">
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
    </div>


  <div id="inputTxt"></div>

  </div>

CSS:

body{
    background: #e6e6e6 
}

#chatWindow{
width:750px;
height:400px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:darkgray;
}

#usersList{
  position:relative;
  background-color:#CCC;
  height:88%;
  width:25%;
  position:relative;
  float:right;
  overflow-y:scroll;
}

#dragBar{
  background-color:darkblue;
  width:750px;
  min-height:23px;
  max-height:23px;

}

#container{
 float:left;
  width:75%;
  height:88%;
  background-color:#CCC;
  clear:both;
  overflow-y:scroll;
  word-wrap:break-word;
}

.content{
  width:95%;
  min-height:10px;
  background-color:lightgray;
  float:left;
  margin:5px;
  clear:both;
}

#inputTxt{
  position:absolute;
  width:100%;
  height:25px;
  background-color:green;
  clear:both;
  bottom:0px;
}

.user{
  margin:4px;
  width:150px;
  height:30px;
  background-color:white;
  margin-left: auto ;
  margin-right: auto ;


}

JS:

$(function() {
  $( "#chatWindow" ).resizable({
    alsoResize: '#dragBar',

   });
    });

Answer 1

使底部固定。

body{
background: #e6e6e6 
}

#chatWindow{
width:750px;
height:400px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:darkgray;
  position: relative;
  padding-bottom: 48px;
}

#usersList{
  position:relative;
  background-color:#CCC;
  height:100%;
  width:25%;
  position:relative;
  float:right;
  overflow-y:scroll;
}

#dragBar{
  background-color:darkblue;
  width:750px;
  min-height:23px;
  max-height:23px;

}

#container{
 float:left;
  width:75%;
  height:100%;
  background-color:#CCC;
  clear:both;
  overflow-y:scroll;
  word-wrap:break-word;
}

.content{
  width:95%;
  min-height:10px;
  background-color:lightgray;
  float:left;
  margin:5px;
  clear:both;
}

#inputTxt{
  position:absolute;
  width:100%;
  height:25px;
  background-color:green;
  clear:both;
  bottom:0;
  z-index: 1;
}

.user{
  margin:4px;
  width:150px;
  height:30px;
  background-color:white;
  margin-left: auto ;
  margin-right: auto ;


}

fiddle :http://jsbin.com/ibimaq/18/edit