获取一个可滚动的子div来动态地垂直填充其父项的其余部分 [英] Getting a scrollable child div to Vertically fill the remainder of its parent dynamically

查看：69
本文介绍了获取一个可滚动的子div来动态地垂直填充其父项的其余部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图让一个具有可变高度的子div（ .form ）使用overflow：scroll当它的内容扩展得太多时。



'p>在 .card 应是动态的和总是窗口的高度，不超过它。



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



这整卡需要响应，以及相匹配的窗口高度。



由于IE8不支持Flex，所以无法使用它。



* {margin：0; padding：0;} html，body {width：100％;身高：100％; background-color：orange;}。card {position：relative;背景颜色：白色; width：320px;身高：100％; margin：0 auto;}。tab，.bottom {padding：18px 16px; text-align：center; border：1px solid black;}。form {overflow：scroll;身高：100％;}。form> *> div {padding：16px;}

< div class = 卡 > < div class =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>这个和上面的所有输入标签应该在.card和一个可滚动的div（在白色背景内）< / div> < / DIV> < / DIV> < div class =bottom>这应该在.card内但在表单外。在白色背景下方< / div>< / div>



编辑：澄清



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



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



JSFiddle


解决方案

我很抱歉，我昨晚没得到这个给你，但它是一个漫长的一天。我从Michael_B取得了方向，并通过使用表使其无JavaScript工作。这不是推荐的未来方法。 表格 s是为了呈现数据，而不是格式化页面（尽管我确实错过了那些日子）。 

  html，body，body>表格{width：100％;身高：100％;保证金：0;填充：0; background-color：＃ffa500;}。card-holder {position：relative;身高：50％; background-color：#ffffff;}。card {position：absolute; top：0;正确：0;底部：0;左：0;溢出：自动;}。卡> div {margin：0 auto; width：320px;}。tab，.bottom {padding：18px 16px; text-align：center; border：1px solid black;}。form-wrapper {overflow：auto;身高：100％;}。form> *> div {padding：16px;}

< table> < TR> < td class =持卡人> < div class =card> < div class =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>这个和上面的所有输入标签应该在.card和一个可滚动的div（在白色背景内）< / div> < / DIV> < / DIV> < div class =bottom>这应该在.card内但在表单外。就在白色背景之下< / div> < / DIV> < / TD> < / TR> < TR> < td class =持卡人> < div class =card> < div class =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>这个和上面的所有输入标签应该在.card和一个可滚动的div（在白色背景内）< / div> < / DIV> < / DIV> < div class =bottom>这应该在.card内但在表单外。就在白色背景之下< / div> < / DIV> < / TD> < / tr>< / table>

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


I'm trying to get a child div (.form) with a variable height to use overflow: scroll when its contents expand too much.

The .card should be dynamic and always be the height of the window, not exceeding it.

The current problem is that when I set the scrolling div to height: 100%, it will exceed it's parent's height and bleed out of it. The (.tab) at the top is a specific height and not a %. I think this is causing the problem but it must be that specific height.

This entire card needs to be responsive as well to match the window height.

Flex can't be used since it's not supported by 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>

Edit: Some clarification

.tab and .bottom have fixed heights. The only variable height inside .card is the overflow: scroll div.

There will also be another card above this one and it may not work with certain solutions. The two cards have the same width and together, they will take up 100% vh. But I don't think this will be an issue.

JSFiddle

解决方案

I'm sorry I didn't get this to you last night, but it was a long day. I took direction from Michael_B and made it work without JavaScript by using a table. This isn't a recommended method moving into the future. tables are meant to render data, not format a page (though I do miss those days).

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>

I closed the input elements, also. Be aware that all elements should be closed. For those elements that don't require a separate closing tab, simply add / before you close the tag up, <input> becomes <input />. It won't prevent most browsers from properly rendering, but it's good practice because other languages are not so nice.

这篇关于获取一个可滚动的子div来动态地垂直填充其父项的其余部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆