拉伸块元素以填充其父元素

Question

我有一个垂直滚动的布局。可滚动div中的一个子元素绝对定位具有较大的顶部值，从而在父级上引入垂直滚动条。 可滚动的父div还有一些子div元素（让它们称为柱子），它们通过position：absolute和some 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捕获父“容器”的整个滚动高度。现在他们的身高是父母的客户身高（不是滚动身高）。因此，当您向下滚动时，您会注意到柱子没有填满溢出内的所有可用高度：滚动。

有人可以建议更改CSS类（.container和/或.pillar）以使其工作。

这是js小提琴的链接，显示同样的问题： http://jsfiddle.net/AshwinPrabhuB/2o5whkmq

谢谢！

Answer 1

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

我理解的问题是，没有办法通过纯交叉浏览器兼容的CSS为子元素垂直拉伸100％来填充其父卷轴高度，如果没有明确定义父卷轴。

因此，基于上述结论，我通过在滚动容器下放置一个显式大小的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%;
}

以下是与变化的小提琴链接：https://jsfiddle.net/AshwinPrabhuB/2o5whkmq/10/

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

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

Answer 2

div .pillar被赋予position:absolute，所以根据它的父母{，.container，它没有达到高度。

只需从position:absolute的css中删除.pillar。

这是FIDDLE。

CSS的变化：

.pillar {
        border: 1px dotted red;
        bottom: 0;
        height: 100%;
        float:left;
        /*position: absolute;*/
        top: 0;  
        left:0 !important;
        width:32% !important;
    }

我的宽度为32％，因为当前使用的边框不会让它适合给定的宽度。此外，无需现在为每个支柱明确指定左的值。所以我刚刚重写了这些价值观。

修改： 我明白错了。现在这是经过纠正的。

将支柱的高度设为 100vmax 。 据我所知，这个单位会给它100/100大小的视口。虽然日志仍显示高度未经匹配的值。但我想这已足够接近了。此外，蓝盒子即将到来。

检查FIDDLE。

.pillar {
    border: 1px dotted red;
    bottom: 0;
    height: 100vmax;
    float:left;
    /*position: absolute;*/
    top: 0;  
    left:0;
    width:32%;
}

Answer 3

这是我心中的解决方案。 我想你必须在容器中添加一个包装div，如下所示：

<div id="container" class="container">  
    <div style="height:400px;">
         <div id="pillar1" class="pillar" ></div>
         <div id="pillar2" class="pillar" ></div>
         <div id="pillar3" class="pillar" ></div>     
         <div id="fixed-and-not-movable">
    </div>   
</div>

或者您必须为所有支柱添加特定高度。 这是因为您在支柱上使用height:100%。所以它匹配具有指定高度的最近元素。 另外，我不知道是否因为你的场景要求你必须添加.stretch div。对于这种情况，您根本不需要该div。下面的代码与您的代码完全相同。

<div id="root">
    <div id="container" class="container">  
        <div style="height:400px;">
            <div id="pillar1" class="pillar" ></div>
            <div id="pillar2" class="pillar" ></div>
            <div id="pillar3" class="pillar" ></div>     
            <div id="fixed-and-not-movable"></div> 
        </div>
    </div>
</div>

Answer 4

获得父级的最大高度的最佳方法是使其位置固定或绝对，而不是提供高度值，而是将top属性设置为零，将bottom属性设置为零。

.parent {
  position: relative;

  .child {
    position: fixed; // or absolute
    top: 0; // anchors element to the top
    bottom: 0; // anchors element to the bottom
  }
 }