国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

如何在一個(gè)div上使用CSS屬性'Overflow: scroll'時(shí)確保完整滾動(dòng)文本的覆蓋范圍
P粉321584263
P粉321584263 2023-08-16 00:13:42
0
2
881
<p>我是編程新手,目前正在嘗試使用HTML/CSS和JS制作一個(gè)簡(jiǎn)單的單頁(yè)網(wǎng)站。我有一個(gè)名為'general_container'的CSS類,我在其中寫入文本,該類在CSS中也定義為'div_text'(下面提供了兩者的代碼):</p> <pre class="brush:php;toolbar:false;">.general_container{ margin: min(1vw,1vh) min(1vw,1vh); display: flex; height: fit-content; width: fit-content; max-width: 100%; max-height: 80vh; position: relative; padding: min(1vw,1vh); border-color: #232323; border-style: solid; border-width: 0.2rem; border-radius: 1rem; align-items: center; justify-content:center; overflow-x: hidden; overflow-y: auto; } .div_text { font-size: calc(12px + 1.5vw); color: #F2F2F2; position: relative; }</pre> <p>當(dāng)文本與其所在的div相比較大時(shí),問(wèn)題就出現(xiàn)了:使用上面定義的字體大小,在我的本機(jī)分辨率(2560x1440)上,文本會(huì)被隱藏并通過(guò)滾動(dòng)條訪問(wèn)。然而,滾動(dòng)條的頂部不顯示文本的開頭,如下圖所示(我使用了通用的占位文本)。</p> <p>我猜測(cè)動(dòng)態(tài)字體大小和對(duì)div大小的約束是這種行為的原因,但我不知道如何解決它。</p> <p>文本不可通過(guò)滾動(dòng)條訪問(wèn)的圖像</p> <p>我嘗試修改div的約束和overflow屬性,但是根據(jù)我在官方Mozilla webdev指南上的閱讀,使用overflow-y: scroll(在這種情況下,auto默認(rèn)為scroll)會(huì)按照我希望的方式工作。如果添加更多文本,增加max-height會(huì)導(dǎo)致相同的問(wèn)題。</p>
P粉321584263
P粉321584263

全部回復(fù)(2)
P粉347804896

移除 align-items:center; 規(guī)則。

P粉226642568

為了確保滾動(dòng)條從頂部開始并覆蓋整個(gè)文本內(nèi)容,請(qǐng)進(jìn)行以下更改: 從.general_container中刪除justify-content: center;。 從.general_container中刪除height: fit-content;width: fit-content;。 為.general_container設(shè)置一個(gè)特定的max-height來(lái)限制其高度。

示例

.general_container {
    /* ...其他屬性... */

    /* 刪除 justify-content: center; */
    /* 刪除 height 和 width fit-content */
    
    max-height: 600px; /* 根據(jù)需要進(jìn)行調(diào)整 */
    
    /* ...其他屬性... */

    overflow-x: hidden;
    overflow-y: auto;
}
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板