html - 拉伸(stretch) block 元素以填充其父元素的 100% 垂直滚动高度

Question

我有一个垂直滚动的布局。可滚动 div 中的一个子元素绝对定位为具有较大的 top 值，从而在父元素上产生垂直滚动条。可滚动的父 div 也有一些子 div 元素(我们称它们为支柱)通过 position: absolute 和一些 left value 水平相邻放置。

这是 HTML 标记:

<div id="root" style="height: 250px; position: relative;">
<div class="stretch">
    <div id="container" class="container">  
         <div id="pillar1" style="left: 0.0%; width:33.25%;" class="pillar" ></div>
         <div id="pillar2" style="left: 33.05%; width:33.25%;" class="pillar" ></div>
         <div id="pillar3" style="left: 66.05%; width:33.25%;" class="pillar" ></div>     
         <div id="fixed-and-not-movable" style="background: blue; width: 25px; height: 25px; top:350px; left: 150px; position: absolute;">
    </div>          
</div>

和CSS:

.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;    
}

我希望支柱 div 捕获父“容器”的整个滚动高度。现在他们的高度是 parent 客户的高度(不是滚动高度)。因此，当您向下滚动时，您会注意到柱子没有填满 overflow:scroll 内的所有可用高度。

有人可以建议更改 CSS 类(.container 和/或 .pillar)以实现此目的。

这是显示相同问题的 js fiddle 链接: http://jsfiddle.net/AshwinPrabhuB/2o5whkmq

谢谢!

Answer 1

经过大量的试验和拉扯，我终于弄清楚这个问题没有完美的 CSS 解决方案。如果有人能证明我是错的，我会很高兴。

据我了解，问题是，如果父元素高度未明确定义，则子元素无法通过纯跨浏览器兼容的 CSS 垂直拉伸(stretch) 100% 以填充其父元素 scrollHeight。

根据上述结论，我通过在滚动容器下放置一个明确大小的 div 并在柱子上设置一个明确的最小高度来解决这个问题。我可以通过 JavaScript 计算这个新中间 div 的高度。

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

<div id="root" style="height: 250px; position: relative;">
<div class="stretch">
    <div id="container" class="container">  
        <div id="fixedMinHeight" class="stretchFixed">
             <div id="pillar1" style="left: 0.0%; width:33.25%;" class="pillar" ></div>
             <div id="pillar2" style="left: 33.05%; width:33.25%;" class="pillar" ></div>
             <div id="pillar3" style="left: 66.05%; width:33.25%;" class="pillar" ></div>     
             <div id="fixed-and-not-movable" style="background: blue; width: 25px; height: 25px; top:350px; left: 150px; position: absolute;">
        </div>
    </div>          
</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%;
}

这是包含更改的 fiddle 链接:https://jsfiddle.net/AshwinPrabhuB/2o5whkmq/10/

或者，可以将相同的方案应用于每个单独的支柱，从而无需插入 DOM。

我很乐意被证明是错误的，但暂时我可以接受这种解决方法。