首頁猿問滾動位于知道其高度的祖先下方深處的元素

滾動位于知道其高度的祖先下方深處的元素

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 關注
146 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

滾動位于知道其高度的祖先下方深處的元素

滾動位于知道其高度的祖先下方深處的元素

2 回答

添加回答