html块元素高度100%,html – 拉伸块元素以填充其父元素的100％垂直滚动高度

经过大量的实验和拔毛,我终于发现没有完美的CSS解决方案来解决这个问题.如果有人能证明我错了,我会很高兴.

我理解的问题是,如果未明确定义父级高度,则无法通过纯交叉浏览器兼容的CSS将子元素垂直拉伸100％以填充其父级scrollHeight.

因此,通过上述结论,我通过在滚动容器下放置一个显式大小的div并在支柱上设置显式的最小高度来解决这个问题.我可以通过JavaScript计算这个新的中间div的高度.

这是修改后的HTML标记(只有fixedMinHeight div是新的)

和CSS(.stretchFixed是从前面添加的)

.stretch {

bottom: 0;

left: 0;

right: 0;

top: 0;

position: absolute;

height: auto;

width: auto;

}

.container {

border: 2px solid;

bottom: 0;

left: 0;

right: 0;

top: 0;

overflow-x: hidden;

overflow-y: scroll;

position: absolute;

}

.pillar {

border: 1px dotted red;

bottom: 0;

height: 100%;

position: absolute;

top: 0;

}

.stretchFixed {

min-height: 375px;

position: relative;

height: 100%;

}

或者,可以在每个单独的柱上应用相同的方案,从而不需要DOM插入.

我希望被证明是错的,但暂时我可以忍受这种解决方法.