css overflow-scroll-with-padding (Webkit VS Firefo

fish 發(fā)布于2019-08-30 11:10 / 918人閱讀

摘要：場(chǎng)景有一個(gè)容器，寬高一定，有內(nèi)邊距，當(dāng)容器的內(nèi)容子元素超出容器時(shí)出現(xiàn)滾動(dòng)條。這一場(chǎng)景在和表現(xiàn)不一致，布局。代碼如下這是一個(gè)標(biāo)題可以看到，會(huì)將滾動(dòng)容器的下內(nèi)邊距一起作為滾動(dòng)內(nèi)容，而和不會(huì)。我們期望得到的是的行為。

場(chǎng)景：有一個(gè)容器，寬高一定，有內(nèi)邊距，當(dāng)容器的內(nèi)容（子元素）超出容器時(shí)出現(xiàn)滾動(dòng)條。這一場(chǎng)景在 Chrome 和 Firefox（IE）表現(xiàn)不一致，border-box 布局。代碼如下：




    
    title
    


    
        這是一個(gè)標(biāo)題

Chrome 74

Firefox 67

IE 11

可以看到，Chrome 會(huì)將滾動(dòng)容器的下內(nèi)邊距（padding-bottom）一起作為滾動(dòng)內(nèi)容，而 Firefox 和 IE 不會(huì)。
我們期望得到的是 Chrome 的行為。為了讓 Firefox,IE 與 Chrome 變現(xiàn)一致，有如下解決方案：

解決方案1
利用 css3 選擇器，為滾動(dòng)容器內(nèi)最后一個(gè)元素添加 margin-bottom （前提：最后一個(gè)元素為塊級(jí)元素，最后一個(gè)元素不能 display: none;）

.box {
    padding-bottom: 0;
}
.box > :last-child {
    margin-bottom: 30px;
}

解決方案2
為滾動(dòng)容器添加一個(gè)偽類

.box {
    padding-bottom: 0;
}
.box::after {
    content: "";
    display: block;
    height: 30px;
    width: 100%;
}

解決方案3
在滾動(dòng)容器內(nèi)，添加一個(gè)html元素作為容器，寫上 padding-bottom ，把內(nèi)容全部寫在這個(gè)元素內(nèi)

.box {
    padding-bottom: 0;
}
.con-wrap {
    padding-bottom: 30px;
}


    
        這是一個(gè)標(biāo)題

歡迎各位大腿提出更好的解決方案~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114817.html

相關(guān)文章

設(shè)備物理像素、設(shè)備獨(dú)立像素

摘要：設(shè)備像素比設(shè)備像素比簡(jiǎn)稱定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系，它的值可以按如下的公式的得到設(shè)備像素比物理像素設(shè)備獨(dú)立像素在某一方向上，方向或者方向在中，可以通過獲取到當(dāng)前設(shè)備的。視覺稿在前端開發(fā)之前，視覺MM會(huì)給我們一個(gè)psd文件，稱之為視覺稿。對(duì)于移動(dòng)端開發(fā)而言，為了做到頁面高清的效果，視覺稿的規(guī)范往往會(huì)遵循以下兩點(diǎn)：首先，選取一款手機(jī)的屏幕寬高作為基準(zhǔn)(以前是iphone...

cgh1999520 2019-08-21 11:29 評(píng)論0 收藏0
設(shè)備物理像素、設(shè)備獨(dú)立像素

摘要：設(shè)備像素比設(shè)備像素比簡(jiǎn)稱定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系，它的值可以按如下的公式的得到設(shè)備像素比物理像素設(shè)備獨(dú)立像素在某一方向上，方向或者方向在中，可以通過獲取到當(dāng)前設(shè)備的。視覺稿在前端開發(fā)之前，視覺MM會(huì)給我們一個(gè)psd文件，稱之為視覺稿。對(duì)于移動(dòng)端開發(fā)而言，為了做到頁面高清的效果，視覺稿的規(guī)范往往會(huì)遵循以下兩點(diǎn)：首先，選取一款手機(jī)的屏幕寬高作為基準(zhǔn)(以前是iphone...

wums 2019-08-30 15:52 評(píng)論0 收藏0
設(shè)備物理像素、設(shè)備獨(dú)立像素

摘要：設(shè)備像素比設(shè)備像素比簡(jiǎn)稱定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系，它的值可以按如下的公式的得到設(shè)備像素比物理像素設(shè)備獨(dú)立像素在某一方向上，方向或者方向在中，可以通過獲取到當(dāng)前設(shè)備的。視覺稿在前端開發(fā)之前，視覺MM會(huì)給我們一個(gè)psd文件，稱之為視覺稿。對(duì)于移動(dòng)端開發(fā)而言，為了做到頁面高清的效果，視覺稿的規(guī)范往往會(huì)遵循以下兩點(diǎn)：首先，選取一款手機(jī)的屏幕寬高作為基準(zhǔn)(以前是iphone...

yagami 2019-08-01 16:17 評(píng)論0 收藏0
CSS進(jìn)階篇--Normalize.css的使用（重置表）

摘要：相比于傳統(tǒng)的，是一種現(xiàn)代的為準(zhǔn)備的優(yōu)質(zhì)替代方案。保護(hù)了有價(jià)值的默認(rèn)值通過為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺效果。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。任何人都能夠提交問題報(bào)告或者提交補(bǔ)丁。本文譯自Normalize.css官網(wǎng): http://nicolasgallagher.com/a... Normalize.css 只是一個(gè)很小的CSS文件，但...

dack 2019-08-28 18:16 評(píng)論0 收藏0
談?wù)則ext-overflow的那些坑和應(yīng)對(duì)方法

摘要：基本語法默認(rèn)值，將溢出的文本裁減掉將溢出的文本用省略號(hào)來表示設(shè)置一個(gè)字符串用來表示溢出的文本兼容性上，除了外，其余兩個(gè)屬性兼容到了，所以大可放心使用。原文地址：https://www.xksblog.top/the-p... text-overflow是CSS3中的屬性，它規(guī)定了當(dāng)文本溢出其包含元素時(shí)以何種方式顯示。但在使用的時(shí)候，有時(shí)會(huì)發(fā)現(xiàn)這個(gè)text-overflow設(shè)置了屬性...

nodejh 2019-08-29 16:26 評(píng)論0 收藏0