Brandan Tyler Lasley Brandan Tyler Lasley - 4 months ago 6x
jQuery Question

Resizable, movable div with 2 children, one at the bottom and one filling the remaining space

So how this is supposed to work ideally is there are 2 divs inside a div that is draggable and resizable. The reddiv is supposed to be always at the bottom of the parent div, and the bluediv is supposed to take up the remaining space in the parent div.

Think of it like a chat box, where the bluediv is where the messages will be displayed, and the bottom div (reddiv) is going to be the input and submit button.

Problem is I can't get the reddiv to stay at the bottom. I could do it with positioned fixed but then it would be at the bottom of the page (outside the parent div).

Anyways its suppose to look like this.
plan 1

#draggable {
top: 0px;
left: 0px;
width: 256px;
height: 256px;
border-style: solid;
border-color: #000000;

#bluediv {
border-style: solid;
border-color: #0000FF;

#reddiv {
bottom: 0;
border-style: solid;
border-color: #ff0000;


Get rid of that random div you have so it looks like this.

  <p> Heres some random text it should float over</p>
  <div id="draggable" class="ui-widget-content">
      <!-- Suppose to fill the remaining space the bottom div doesn't use -->
      <div id="bluediv">Things</div>
      <!-- Suppose to be on the bottom, like a chatbox message input -->
      <div id="reddiv">And Stuff</div>

Working fiddle: