拉伸块元素以填充其 parent 元素的 100% 垂直滚动高度

Question

我有一个垂直滚动的布局。可滚动 div 中的 child 元素之一绝对定位为具有较大的顶部值，从而在 parent 上产生垂直滚动条。可滚动的 parent div 也有一些 child div 元素（我们称它们为支柱）通过 position: absolute 和一些左值彼此水平相邻。

这是 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;    
}

我希望支柱 divs 捕获 parent "container" 的整个滚动高度。现在他们的高度是 parents 客户端高度（不是滚动高度）。因此，当您向下滚动时，您会注意到柱子没有填满 overflow:scroll.

内的所有可用高度

有人可以建议对 CSS 类 (.container and/or .pillar) 进行更改以使其工作。

这里有一个 link 到 js fiddle 显示同样的问题： http://jsfiddle.net/AshwinPrabhuB/2o5whkmq

谢谢！

Answer 1

div .pillar 给出 position:absolute ，所以它没有根据它的父项获取高度，即 .container.

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

这里是 FIDDLE.

CSS 的变化：

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

我给出的 width 为 32%，因为当前使用的 borders 不适合给定的宽度。此外，现在 不需要 为每个支柱明确指定 left 的值。所以我刚刚覆盖了这些值。

编辑：我理解错了。现在这是更正后的。

将支柱的高度设为100vmax。据我了解，该单元将为其提供 100/100 大小的视口。尽管日志仍显示未匹配的高度值。但我想这已经足够接近了。另外，蓝色方框会挡住它。

检查FIDDLE。

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

Answer 2

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

我理解的问题是，没有办法通过纯粹的跨浏览器兼容 CSS 子元素垂直拉伸 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 link 的变化：https://jsfiddle.net/AshwinPrabhuB/2o5whkmq/10/

或者，相同的方案可以应用于每个 dividual 支柱，因此不需要 DOM 插入。

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

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

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

.parent {
  position: relative;

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

拉伸块元素以填充其 parent 元素的 100% 垂直滚动高度

Stretch a block element to fill 100% vertical scroll height of its parent element

html

css

layout

position

css-position