可调整大小的可移动div，带有2个孩子，一个在底部，一个在剩余空间中填充

Question

因此，这应该如何理想地工作是在一个div内有2个div，这些div是可拖动和可调整大小的。 Reddiv应该始终位于父div的底部，bluediv应该占用父div中的剩余空间。

可以将其想象为一个聊天框，其中bluediv是显示消息的位置，而底部div（reddiv）将成为输入和提交按钮。

问题是我无法让reddiv停留在底部。 我可以使用固定位置来做到这一点，但是它将在页面底部（父div之外）。

无论如何，它看起来应该像这样。
_{（来源： oregon911.net ）}

#draggable { 
  top: 0px;
  left: 0px;
  z-index:1000;
  position:absolute;
  width: 256px;
  height: 256px;
  border-style: solid;
  border-color: #000000;
}

#bluediv {
  border-style: solid;
  border-color: #0000FF;
  width:100%;
  height:100%;
}

#reddiv {
  bottom: 0;
  height:50px;
  width:100%;
  border-style: solid;
  border-color: #ff0000;
}

https://jsfiddle.net/g8bmc04x/24/

Answer 1

摆脱掉您拥有的随机div，使其看起来像这样。

<body>
  <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>
  </div>
</body>

工作提琴： https : //jsfiddle.net/1LaLd8r3/

可调整大小的可移动div，带有2个孩子，一个在底部，一个在剩余空间中填充

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-16 01:25:50

可调整大小的可移动div，带有2个孩子，一个在底部，一个在剩余空间中填充

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-16 01:25:50

解决方案1
0 已采纳 2016-06-16 01:25:50