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

时间：2015-11-11 20:30:55

标签： html css

我试图让一个具有可变高度的子div（.form）来使用溢出：当其内容扩展太多时滚动。

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

当前的问题是，当我将滚动div设置为高度：100％时，它将超过它的父级高度并使其流出。顶部的（.tab）是特定高度而不是％。我认为这会导致问题，但必须是特定的高度。

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

不能使用Flex，因为IE8不支持。

＆＃13;
＆＃13; 
* {
    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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

编辑：一些澄清

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

在此之上还会有另一张卡，它可能无法使用某些解决方案。这两张卡的宽度相同，一起占用100％。但我不认为这将是一个问题。

JSFiddle

1 个答案:

答案 0 :(得分：1)

对不起，我昨晚没有收到你的消息，但这是漫长的一天。我接受了Michael_B的指示，并使用table使其无需JavaScript。这不是一种推向未来的推荐方法。 table用于呈现数据，而不是格式化页面（尽管我确实错过了那些日子）。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

相关问题
最新问题