设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 创业者 数据 手机
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2021-01-01 02:21 所属栏目:34 来源:网络整理
导读:我有一个垂直滚动的布局.可滚动div中的一个子元素绝对定位为具有较大的顶部值,从而在父级上引入垂直滚动条. 可滚动的父div还有一些子div元素(让它们称为柱子),它们通过position:absolute和some left值彼此水平相邻. 这是HTML标记: div id="root" style="he

我有一个垂直滚动的布局.可滚动div中的一个子元素绝对定位为具有较大的顶部值,从而在父级上引入垂直滚动条.
可滚动的父div还有一些子div元素(让它们称为柱子),它们通过position:absolute和some left值彼此水平相邻.

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

谢谢!

解决方法

经过大量的实验和拔毛,我终于发现没有完美的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%;
}

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

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

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

(编辑:ASP站长网)

    网友评论
    推荐文章
      热点阅读