如何使容器内post元素的内容与滚动条不触碰容器背景图边缘？

我正在开发一个网站页面，页面中央有两个垂直排列的容器。目前post元素的内容和滚动条会和top、bottom容器背景图的边框文字重叠。我需要让post的内容和滚动条完全适配在背景图内部，四周留出足够空间。调整过margin和padding没效果，求解决办法。

相关代码：

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">

*, *::after, *::before { 
    box-sizing: border-box;
}

/* must stay as is */
html,
body {
    height: 100%;
    margin: 0;
}

/* must stay as is */
body {
    background-size: cover;
    background-attachment: fixed;
    background-image: url("https://files.catbox.moe/jn5kb6.png");
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

main {
    display: grid;
    grid-template-rows: minmax(0, 5fr) minmax(0, 4fr);
    justify-items: center;
    gap: 7em;
    height: 98%;}

.top {
    background: url("https://files.catbox.moe/je4qpd.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    aspect-ratio: 990 / 687;
    padding: 4%;
    margin: 6vh auto 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.bottom {
    background: url("https://files.catbox.moe/h8qi01.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    aspect-ratio: 974 / 559;
    padding: 4%;
    overflow-x: hidden;
    overflow-y: auto;
}

.post {
    justify-content: center;
    background-color: transparent;
    font-size: 22px;
    font-family:{select:font};
    color: #000;
    width: 100%;
    /* top right bottom left */
    padding: 20px 20px 20px 20px;
    margin-top: 0vh;
    overflow-x: hidden;
    overflow-y: auto;
}

</style>
    </head>

<body>

<main>
    <div class="top">
        <div class="post">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>
    </div>
    
    <div class="bottom">
              <div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           </div>
    </div>
    
</main>

</body>

</html>

解决方案 #

问题核心是滚动条归属和内边距分配不合理，按以下步骤修改即可：

1. 移除内层post的滚动属性
   滚动逻辑由外层.top/.bottom容器负责，删掉.post里的overflow-x: hidden; overflow-y: auto;，避免内外层滚动冲突。

2. 调整外层容器的内边距
   给.top和.bottom设置精准的padding，右侧额外留空间给滚动条，确保内容不触碰背景图边框：

   .top {
       /* 保留原有属性，替换padding */
       padding: 8% 10% 8% 8%; /* 上、右、下、左，右侧预留滚动条空间 */
       overflow-x: hidden;
       overflow-y: auto;
   }
   
   .bottom {
       /* 保留原有属性，替换padding */
       padding: 8% 10% 8% 8%;
       overflow-x: hidden;
       overflow-y: auto;
   }
   

   可根据背景图边框实际宽度微调百分比，保证四周空间合适。

3. 优化post的内边距
   将.post的padding: 20px 20px 20px 20px;改为padding: 10px 0;，避免和外层padding叠加浪费空间，同时让内容更居中。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">

*, *::after, *::before { 
    box-sizing: border-box;
}

/* must stay as is */
html,
body {
    height: 100%;
    margin: 0;
}

/* must stay as is */
body {
    background-size: cover;
    background-attachment: fixed;
    background-image: url("https://files.catbox.moe/jn5kb6.png");
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

main {
    display: grid;
    grid-template-rows: minmax(0, 5fr) minmax(0, 4fr);
    justify-items: center;
    gap: 7em;
    height: 98%;}

.top {
    background: url("https://files.catbox.moe/je4qpd.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    aspect-ratio: 990 / 687;
    padding: 8% 10% 8% 8%;
    margin: 6vh auto 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.bottom {
    background: url("https://files.catbox.moe/h8qi01.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    aspect-ratio: 974 / 559;
    padding: 8% 10% 8% 8%;
    overflow-x: hidden;
    overflow-y: auto;
}

.post {
    justify-content: center;
    background-color: transparent;
    font-size: 22px;
    font-family:{select:font};
    color: #000;
    width: 100%;
    padding: 10px 0;
    margin-top: 0vh;
}

</style>
    </head>

<body>

<main>
    <div class="top">
        <div class="post">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>
    </div>
    
    <div class="bottom">
              <div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           </div>
    </div>
    
</main>

</body>

</html>

内容的提问来源于stack exchange，提问作者online-user