javascript - 如何在父 div 中使用 y-overflow-scroll 调整 div？

Question

我在 <td> 中遇到以下问题细胞: parent <div class="editor-window">包含 <label>和一个 child <div> . child <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>

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

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

Answer 1

最简单的解决方案——使用calc()对于 height (如果您有固定的 header 大小并且不需要 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>

顺便说一句:

The HTML Label Element (<label>) represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute. Such a control is called the labeled control of the label element. With one input can be assosiated few labels.

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