首页猿问滚动位于知道其高度的祖先下方深处的元素

滚动位于知道其高度的祖先下方深处的元素

Html5

小唯快跑啊 2023-09-18 17:51:40

我有类似以下内容：#page { height: 200px; /* just for illustration, would be 100vh */ border: 1px solid black; /* just for illustration */ display: flex; flex-direction: column;}#nav { height: 30px; background-color: lightBlue; flex: none;}#content { background-color: lightGreen; display: flex; flex: 1 1 auto;}section { flex: 1 1 50%; padding: 5px; margin: 5px; border: 1px solid black;}.problem { color: white; background-color: red; height: 500px; overflow-y: auto;}<div id="page"> <div id="nav"> I'm a nav bar! </div> <div id="content"> <section> Stuff </section> <section> More stuff <div class="problem"> Oh no I'm huge and should scroll vertically </div> </section> </div></div>我希望页面永远不会滚动，并且我只希望大的红色矩形在<section>. 我需要添加哪些规则才能使红色矩形了解其父级的边界？

查看完整描述

2 回答

富国沪深

TA贡献1790条经验获得超9个赞

您可以将您的部分设为 Flexbox 容器，然后设置Flex CSS 属性（flex-grow、flex-shrink和flex-basis 的缩写）

您希望它展开或收缩以占据所有剩余高度 =>flex-grow: 1;和flex-shrink: 1;

flex-basis 的解释（来自这个答案）：

弹性基础系数

当 flex-basis 为 0 时，flex-grow 会忽略 Flex 项目中内容的大小，并将该行上的所有空间视为可用空间。

这是绝对尺寸。线路上的所有空间均已分配。

这就是我们这里需要的=>flex-basis: 0;

代码如下：

section {

flex: 1 1 50%;

padding: 5px;

margin: 5px;

border: 1px solid black;

display: flex; /* added */

flex-direction:column; /* added */

}

.problem {

color: white;

background-color: red;

overflow-y: auto;

flex: 1 1 0; /* added */

}

#page {

height: 100vh; /* just for illustration, would be 100vh */

border: 1px solid black; /* just for illustration */

display: flex;

flex-direction: column;

}

#nav {

height: 30px;

background-color: lightBlue;

flex: none;

}

#content {

background-color: lightGreen;

display: flex;

flex: 1 1 auto;

}

section {

flex: 1 1 50%;

padding: 5px;

margin: 5px;

border: 1px solid black;

display: flex;

flex-direction:column;

}

.problem {

color: white;

background-color: red;

overflow-y: auto;

flex: 1 1 0;

}

I'm a nav bar!

</div>

Stuff

</section>

More stuff

Oh no I'm huge and should scroll vertically

</div>

</section>

</div>

如果您在中添加更多内容div.problem，它将具有预期的行为

#page {

height: 100vh; /* just for illustration, would be 100vh */

border: 1px solid black; /* just for illustration */

display: flex;

flex-direction: column;

}

#nav {

height: 30px;

background-color: lightBlue;

flex: none;

}

#content {

background-color: lightGreen;

display: flex;

flex: 1 1 auto;

}

section {

flex: 1 1 50%;

padding: 5px;

margin: 5px;

border: 1px solid black;

display: flex;

flex-direction:column;

}

.problem {

color: white;

background-color: red;

overflow-y: auto;

flex: 1 1 0;

}

I'm a nav bar!

</div>

Stuff

</section>

More stuff

Oh no I'm huge and should scroll vertically

</div>

</section>

</div>

反对回复 2023-09-18

阿波罗的战车

TA贡献1862条经验获得超6个赞

#page {

height: 200px; /* just for illustration, would be 100vh */

border: 1px solid black; /* just for illustration */

display: flex;

flex-direction: column;

}

#nav {

height: 30px;

background-color: lightBlue;

flex: 0 0 auto;

}

#content {

background-color: lightGreen;

display: flex;

overflow: hidden;

}

section {

flex: 1 1 50%;

padding: 5px;

margin: 5px;

border: 1px solid black;

overflow-y: auto;

}

.problem {

color: white;

background-color: red;

height: 500px;

}

反对回复 2023-09-18

2 回答
0 关注
108 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

滚动位于知道其高度的祖先下方深处的元素

滚动位于知道其高度的祖先下方深处的元素

2 回答

添加回答