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

fish 發布于2019-08-30 11:10 / 902人閱讀

摘要：場景有一個容器，寬高一定，有內邊距，當容器的內容子元素超出容器時出現滾動條。這一場景在和表現不一致，布局。代碼如下這是一個標題可以看到，會將滾動容器的下內邊距一起作為滾動內容，而和不會。我們期望得到的是的行為。

場景：有一個容器，寬高一定，有內邊距，當容器的內容（子元素）超出容器時出現滾動條。這一場景在 Chrome 和 Firefox（IE）表現不一致，border-box 布局。代碼如下：




    
    title
    


    
        這是一個標題

Chrome 74

Firefox 67

IE 11

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

解決方案1
利用 css3 選擇器，為滾動容器內最后一個元素添加 margin-bottom （前提：最后一個元素為塊級元素，最后一個元素不能 display: none;）

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

解決方案2
為滾動容器添加一個偽類

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

解決方案3
在滾動容器內，添加一個html元素作為容器，寫上 padding-bottom ，把內容全部寫在這個元素內

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


    
        這是一個標題

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114817.html

設備物理像素、設備獨立像素

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

cgh1999520 2019-08-21 11:29 評論0 收藏0
設備物理像素、設備獨立像素

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

wums 2019-08-30 15:52 評論0 收藏0
設備物理像素、設備獨立像素

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

yagami 2019-08-01 16:17 評論0 收藏0
CSS進階篇--Normalize.css的使用（重置表）

摘要：相比于傳統的，是一種現代的為準備的優質替代方案。保護了有價值的默認值通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。這就意味著你不用再為所有公共的排版元素重新設置樣式。任何人都能夠提交問題報告或者提交補丁。本文譯自Normalize.css官網: http://nicolasgallagher.com/a... Normalize.css 只是一個很小的CSS文件，但...

dack 2019-08-28 18:16 評論0 收藏0
談談text-overflow的那些坑和應對方法

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

nodejh 2019-08-29 16:26 評論0 收藏0