将可滚动的子div垂直填充其父元素的剩余空间动态化。
将可滚动的子div垂直填充其父元素的剩余空间动态化。
我试图让一个高度可变的子div（.form）在其内容扩展过多时使用overflow: scroll。
.card应该是动态的，始终与窗口的高度相同，不超过它。
当前的问题是，当我将滚动的div设置为height: 100%时，它会超出其父元素的高度并溢出出去。顶部的.tab是一个具体的高度，而不是百分比。我认为这是导致问题的原因，但它必须是具体的高度。
整个卡片还需要响应式设计，以适应窗口的高度。
由于IE8不支持Flex，所以不能使用它。
CSS代码：
* {
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;
}
HTML代码：
这是一个选项卡
这个和上面所有的input标签应该在.card内部并且是一个可滚动的div（在白色背景内部）
这应该在.card内部但在表单外部。就在白色背景下面
补充说明：
.tab和.bottom具有固定的高度。在.card内唯一的可变高度是overflow: scroll的div。
还会有另一个在这个卡片上面的卡片，可能不适用于某些解决方案。这两个卡片具有相同的宽度，它们将占据100%的视窗高度。但我不认为这会成为问题。
这个问题的出现是因为作者想要实现一个滚动的子div，使其垂直填充父容器的剩余部分。作者通过使用一个表格来实现了这个效果，但这并不是一个推荐的方法，因为表格应该用于渲染数据，而不是格式化页面。
作者提供了以下CSS代码来设置页面的样式：
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;
}
并提供了以下HTML代码来实现滚动的子div垂直填充父容器的剩余部分：
|
This is a tab
...
This and all the input tags above this should be inside .card and a scrollable div (inside the white background)
This should be inside .card but outside the form. Just below the white background
|
|
This is a tab
...
This and all the input tags above this should be inside .card and a scrollable div (inside the white background)
This should be inside .card but outside the form. Just below the white background
|
这段代码使用了一个表格来创建两个具有相同结构的卡片。每个卡片包含一个标签（.tab）、一个表单（.form）和底部内容（.bottom）。表单中的内容被包装在一个具有滚动效果的div（.form-wrapper）中。
通过将父容器（.card）的position设置为absolute，并将其四个边缘都设置为0，可以使其垂直填充父容器的剩余部分。将子div（.form-wrapper）的高度设置为100%并将overflow属性设置为auto，可以实现滚动效果。
这样，就可以实现一个滚动的子div，使其垂直填充父容器的剩余部分。但需要注意的是，这种方法不是推荐的做法，因为表格应该用于渲染数据而不是格式化页面。