Question

我无法让中间div不会溢出到下一个。这是用于聊天，中间div将包含消息，并且将是唯一的“可滚动”部分。

主聊天布局创建如下（内联CSS以便更好地理解）：

<div id="divContainer" runat="server" style="box-sizing: border-box; word-wrap: break-word; width: 20%; max-height: 35%; position: fixed; right: 0px; bottom: 0%; box-sizing: border-box;">
   <div id="divTop" style="float: left;width: 100%;"><span id="spanChatMinimize" style="float: right; padding: 3px;">_</span>
   </div>
   <div style="clear: both"></div>
   <div id="divBody" runat="server" style="overflow-y: scroll; box-sizing: border-box;"></div>
   <div id="divControls" runat="server" style="position:absolute;box-sizing: border-box; bottom:0px; width:100%;"></div>
</div>

然后我将一些以编程方式创建的div（每个聊天注释一个，没有相关的样式）抛给“divBody”，并将一些以编程方式创建的控件抛给“divControls”。

我不能让“divBody”停留在“divTop”和“divControls”之间，是唯一一个有滚动的人，我不希望在容器旁边有固定的高度。

请参阅http://jsfiddle.net/r7scgxwf/2/

消息的滚动条（“divBody”）在那里，但是灰色（不活动），因为在我看来它溢出了“divControls”以及整个聊天容器（“divContainer”）。控件是可见的，并且消息在控件之间的空间下方可见（溢出）。

所以我的问题是，当控制div启动时如何使中间div结束，必要时添加滚动？也没有使用JavaScript。

Answer 1

尝试为包含的div #divContainer添加一些高度，然后为聊天div #divBody添加一个高度。

#divContainer { height: 150px; }
#divBody { height: 100px; overflow:auto;}

小提琴：http://jsfiddle.net/8matvxto/

固定（顶部和底部）div之间的可滚动div

1 个答案: