html - 获取可滚动的子 div 以垂直动态填充其父级的其余部分

Question

我正在尝试获取一个具有可变高度的子 div (.form) 以使用溢出:当其内容扩展太多时滚动。

.card 应该是动态的，并且始终是窗口的高度，不能超过它。

当前的问题是，当我将滚动 div 设置为 height: 100% 时，它会超过其父级的高度并从中溢出。顶部的 (.tab) 是特定高度而不是 %。我认为这是导致问题的原因，但它必须是那个特定的高度。

整个卡片也需要响应以匹配窗口高度。

无法使用 Flex，因为 IE8 不支持它。

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: orange;
}

.card {
    position: relative;
    background-color: white;
    width: 320px; 
    height: 100%;
    margin: 0 auto;
}

.tab, .bottom {
    padding: 18px 16px;
    text-align: center;
    border: 1px solid black;
}

.form {
    overflow: scroll;
    height: 100%;
}

.form > * > div {
    padding: 16px;
}

<div class="card">
    <div class="tab">This is a tab</div>
    <div class="form">
        <div class="form-wrapper">
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div><input type="text"></div>
            <div>this and all the input tags above this should be inside .card and a scrollable div (inside the white background)</div>
        </div>
    </div>
    <div class="bottom">This should be inside .card but outside the form. Just below the white background</div>
</div>

编辑:一些说明

.tab 和 .bottom 具有固定的高度。 .card 中唯一的可变高度是 overflow: scroll div。

这张卡上方还会有另一张卡，它可能不适用于某些解决方案。两张卡的宽度相同，加在一起，它们将占用 100% vh。但我认为这不会成为问题。

JSFiddle

Answer 1

很抱歉我昨晚没有把这个给你，但这是漫长的一天。我从 Michael_B 那里得到指导，并通过使用 table 使其在没有 JavaScript 的情况下工作。 .这不是走向 future 的推荐方法。 table s 旨在呈现数据，而不是格式化页面(尽管我确实怀念那些日子)。

html, body, body > table {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffa500;
}

.card-holder {
    position: relative;
    height: 50%;
    background-color: #ffffff;
}

.card {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
}

.card > div {
    margin: 0 auto;
    width: 320px;
}

.tab, .bottom {
    padding: 18px 16px;
    text-align: center;
    border: 1px solid black;
}

.form-wrapper {
    overflow: auto;
    height: 100%;
}

.form > * > div {
    padding: 16px;
}

<table>
    <tr>
        <td class="card-holder">
            <div class="card">
                <div class="tab">This is a tab</div>
                <div class="form">
                    <div class="form-wrapper">
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div>this and all the input tags above this should be inside .card and a scrollable div (inside the white background)</div>
                    </div>
                </div>
                <div class="bottom">This should be inside .card but outside the form. Just below the white background</div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="card-holder">
            <div class="card">
                <div class="tab">This is a tab</div>
                <div class="form">
                    <div class="form-wrapper">
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div><input type="text" /></div>
                        <div>this and all the input tags above this should be inside .card and a scrollable div (inside the white background)</div>
                    </div>
                </div>
                <div class="bottom">This should be inside .card but outside the form. Just below the white background</div>
            </div>
        </td>
    </tr>
</table>

我关闭了 input元素，也。请注意，所有元素都应关闭。对于那些不需要单独的关闭选项卡的元素，只需添加 /在关闭标签之前，<input>变成 <input /> .它不会阻止大多数浏览器正确呈现，但这是一个很好的做法，因为其他语言不是很好。