CORE ISSUE:我需要正确地确定<div>嵌套在可调整大小的父级中的子级的高度<div>.在调整父级的大小时,子级不应超出父级的范围.父本身应该受到限制,以免它缩小到超出孩子的最小可滚动范围.
DEAD ENDS:通过几个小时的研究,我了解到CSS即使具有该calc()功能,也无法<div>动态设置高度和宽度.此外,似乎为了防止子级<div>溢出其父级维度,父级本身必须具有固定大小.在后一种情况下,样式喜欢height: auto; height: inherit;和height: 100%;可能都会产生相同的结果.
之前已经在这里提出了类似的问题,但我找到的都没有解决调整大小问题.例如,提供给以下问题的解决方案无法正确解决我的问题.
在我的情况下,我有一个<div>用户调整大小和/或拖动到屏幕的任何部分.<div>如有必要,它的内容应自动滚动.在任何情况下,它们都不应超过容器的尺寸,即可调整尺寸的容器<div>.我的情况要求我不使用jQuery,但欢迎使用JavaScript解决方案.(即使PERL可能也值得,因为我将提供页面并通过来自Perl平台的AJAX进行更新.)
下面包含一个完整工作的示例,其中显示了子项如何<div>超过其父项,即使启用了滚动也是如此,无论父项<div>的大小如何调整都会发生这种情况.(我在Firefox和Safari中测试过它.)
请注意,在我的实际应用程序中,<div>将通过<select>菜单中的每个用户选择通过AJAX提供内容,并且内容将具有不同的长度.无论返回的长度如何,容器/父级<div>应保持与用户自己调整的大小相同.
<!DOCTYPE html>
<HTML lang="utf8">
<head>
<title>Example of Resizable/Draggable Container Div with Nested (Overflowing) Contents</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style type="text/css">
.nested {
background-color: #ffffcc;
overflow-y: auto;
overflow-x: hidden;
max-height: 720px;
height: inherit;
color: …