在可调整大小的容器中创建一个div [英] Making a div scrollable inside a resizeable container div

问题描述

这个div是可调整大小的，有两个子项：标题栏div，和一个内容div。

我想让内容div当它大于窗口div时获取滚动条。

http://www.webdevout.net/test?0vL 交互式演示了我的问题。点击内容文本和新行添加。

内容div有 overflow：auto

设置 max-height 或 height 内容到 100％不起作用，因为100％不考虑标题栏高度，因此滚动条在某些行从底部出现后出现。此外，滚动条，当它们出现时，遮挡外部div上的可拖动缩略图，停止它可调整大小：（

解决方案

将您可调整大小的窗口更改为子级内容< div> 。这样就可以调整子级< div> ，并且父< div> 自动调整大小以保存其内容。

它是有意的，但你在你的html和 .Frame> .Contents {this}中有< div id =Contentclass =Content>

我相信这是你正在寻找的东西。 ：

http://www.webdevout.net / test？0wE

I am trying to make a div that looks like the MS Windows Command Prompt.

The div is resizeable, and has two children: a title-bar div, and a content div.

I want the content div to get scrollbars when it is larger than the window div. I want the title-bar to always be visible and not scroll, and not to be on top of the scroll bars.

http://www.webdevout.net/test?0vL interactively demonstrates my problem. Click on the content text and new rows get added. When enough rows are added for scroll bars to appear, they do not.

The content div has overflow:auto set.

Setting max-height or height on the content to 100% does not work because 100% doesn't account for the title-bar height, so the scrollbars appear after some rows have gone off the bottom. Also, the scrollbars, when they appear, obscure the draggable thumb on the outer div, stopping it being resizeable :(

解决方案

Just change your resizable window to the child 'content' <div>. that way you're resizing the child <div> and the parent <div> resizes automatically to hold its contents.

Also, not sure if it was intentional but you have <div id ="Content" class="Content"> in your html and .Frame>.Contents { in your CSS (note the word content has an 's' in the CSS).

I believe this is what you're looking for:

http://www.webdevout.net/test?0wE

这篇关于在可调整大小的容器中创建一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！