如何将div与y-overflow-scroll放在父div中？

Question

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

JSFiddle。

​

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

editorWindow.append(propertyGrid);

.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;
}

<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>

​

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

​

当较低的<div>具有垂直滚动时，标题<label>必须保持固定。对如何修复溢出有什么建议吗？

Answer 1

最简单的解决方案-对height使用calc() (如果你有固定的报头大小，不需要support IE9-)：

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

The fixed snippet (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>)表示用户界面中项目的标题。可以通过将控件元素放在<label>元素内或使用for属性将其与控件关联。这样的控件称为label元素的标签控件。一个输入可以关联几个标签。

在这种情况下，您不应该使用label tag -您没有<form>或控件元素。我认为可以使用来自Heading elements的东西，例如，<h5>。