Question

所以理想情况下这应该是如何工作的div中有2个div可以拖动和调整大小。 reddiv应该始终位于父div的底部，而bluediv应该占用父div中的剩余空间。

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

问题是我无法让reddiv保持在最底层。我可以使用定位固定，但它会在页面的底部（在父div之外）。

无论如何，它假设看起来像这样。 plan 1

#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 个答案: