css overflow-scroll-with-padding (Webkit VS Firefox)

時間 2019-12-10

標籤 css overflow scroll padding webkit firefox 欄目 CSS 简体版

原文原文鏈接

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>title</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        .box {
            overflow: auto;
            border: 4px solid #f00;
            padding: 30px;
            width: 200px;
            height: 200px;
            background-color: #ffb475;
        }
        .content {
            width: 100%;
            height: 150px;
            background-color: #8b8bff;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>這是一個標題</h3>
        <div class="content"></div>
    </div>
</body>
</html>

Chrome 74html

Firefox 67
css3

IE 11佈局

能夠看到，Chrome 會將滾動容器的下內邊距（padding-bottom）一塊兒做爲滾動內容，而 Firefox 和 IE 不會。
咱們指望獲得的是 Chrome 的行爲。爲了讓 Firefox,IE 與 Chrome 變現一致，有以下解決方案：spa

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

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

解決方案2
爲滾動容器添加一個僞類htm

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

解決方案3
在滾動容器內，添加一個html元素做爲容器，寫上 padding-bottom ，把內容所有寫在這個元素內ip

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

<div class="box">
    <div class="con-wrap">
        <h3>這是一個標題</h3>
        <div class="content"></div>
    </div>
</div>

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。