如何在父div中使用y-overflow-scroll匹配div？

Question

我在<td>单元格中遇到以下问题：父级<div class="editor-window">包含<label>和子级<div>。页面加载时，子<div>附加了另一个<div>。

JSFiddle。

＆＃13;

＆＃13;

var propertyGrid = $("<div class='property-table' />");
var editorWindow = $("#property-editor");

editorWindow.append(propertyGrid);

＆＃13;

.content {
    //    hard-coded values for fiddle
    width: 225px;
    height: 200px;
}
.editor-panel {
    height: 100%;
    width: auto;
}
.editor-window {
    border: 1px solid rgba(61, 61, 61, 0.75);
}
.v-scroll-window {
    overflow-y: scroll;
}
.editor-header {
    text-align: center;
    display: block;
    height: auto;
    width: 100%;
    background-color: #b4b4b4;
    color: #00004f;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 12px;
    font-weight: 600;
}
.max-window {
    width: 100%;
    height: 100%;
}
.property-table {
    display: table;
    width: 206px;
    height: 100%;
    border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="content">
    <tr>
        <td class="editor-panel">
            <div class="editor-window max-window">
                <label class="editor-header">Property Editor</label>
                <div class="v-scroll-window max-window">
                    <div class="max-window" id="property-editor" /></div>
            </div>
        </td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

问题是<div>的父#property-editor溢出其父级：

标题<label>必须保持固定，而较低的<div>具有垂直滚动。关于如何修复溢出的任何想法？

Answer 1

最简单的解决方案 - 对calc()使用height（如果您有固定的标题大小但不需要support IE9-）：

.v-scroll-window {
    overflow-y: scroll;
    height: calc(100% - 14px);
}

固定代码段（JSFiddle）：

var propertyGrid = $("<div class='property-table'/>");
var editorWindow = $("#property-editor");

editorWindow.append(propertyGrid);

.content {
    width: 225px;
    height: 200px;
}

.editor-panel {
    height: 100%;
    width: auto;
}

.editor-window {
    border: 1px solid rgba(61, 61, 61, 0.75);
}

.editor-header {
    text-align: center;
    display: block;
    width: 100%;
    background-color: #b4b4b4;
    color: #00004f;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}

.max-window {
    width: 100%;
    height: 100%;
}

.v-scroll-window {
    overflow-y: scroll;
    height: calc(100% - 14px);
}

.property-table {
    display: table;
    width: 217px;
    height: 100%;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="content">
    <tr>
        <td class="editor-panel">
            <div class="editor-window max-window">
                <h5 class="editor-header">Property Editor</h5>
                <div class="v-scroll-window max-window">
                    <div class="max-window" id="property-editor"></div>
                </div>
            </div>
        </td>
    </tr>
</table>

顺便说一下：

  

HTML标签元素（<label>）表示用户界面中项目的标题。它可以通过将控制元素放在<label>元素内，或者使用for属性与控件关联。这种控制称为标签元素的标记控制。一个输入可以被分配几个标签。

在这种情况下，您不应使用label tag - 您没有<form>或控制元素。我认为可以使用Heading elements中的内容，例如<h5>。