如何解决向下滚动时main div背景与边框被截断的问题？

问题原因 #

你遇到的问题核心在于：.main设置了height:100%，这个高度是继承自同样设置了height:100%的body，而body的高度仅等于当前浏览器视口的高度。当.main内部内容超过视口高度时，.main的高度不会自动扩展，导致滚动后超出视口的部分没有背景色和边框，只有文本内容显示。

解决方案 #

将.main的height:100%替换为min-height:100%。min-height:100%会让元素高度至少保持视口高度，当内部内容更多时，元素高度会自动跟随内容扩展，这样背景色和边框就会覆盖所有内容区域。

修改后的CSS代码 #

* {
  box-sizing: border-box;
}

html{
    font-size:10px;
}
html, body{
    background-image: url(https://i.redd.it/pdcyxx2i2n941.jpg);
    background-repeat: repeat;
    z-index: -1;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-attachment: fixed;
}
/* NOTE:  */
.navbar ul{
    list-style-type: none;
    overflow:hidden;
    width:80rem;
    min-width: 40rem;
    margin-top:1rem;
    margin-bottom:1rem;
    margin-left:auto;
    margin-right: auto;
    border-style: solid;
    border-width: 3px;
    border-color: hsl(0, 0%, 30%);
    background-color: hsl(0,0%,0%);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.navbar a{
    color: hsl(0, 0%, 90%);
    text-decoration: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left:1.5rem;
    padding-right:1.5rem;
    display: block;
    text-align: center;
    font-family: metrobold;
    font-size:3.2rem;
}
.navbar a:hover{
    color: hsl(240,80%,90%)
}
.navbar li{
    float: left;
}

.main{
    width:80rem;
    min-width: 40rem;
    min-height:100%; /* 此处修改为min-height */
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    border-left: 3px solid hsl(0, 0%, 30%);
    border-right: 3px solid hsl(0, 0%, 30%);
    border-top: 3px solid hsl(0, 0%, 30%);
    border-bottom: 0;
    background-color: hsl(0,0%,0%);
    line-height:1.5;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

.main h1{
    color: hsl(0, 0%, 90%);
    text-align: center;
    font-family: metrobold;
    font-size: 5rem;
}

.main h2{
    color: hsl(0, 0%, 90%);
    text-align: center;
    font-family: metrobold;
    font-size: 2.2rem;
}

.main p {
    color: hsl(0, 0%, 65%);
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: center;
    font-family: metroregular;
    font-size:2rem;
    text-align: left;
}

.main img{
    display: block;
    margin: auto;
}

h3.devdate{
    color: hsl(0, 0%, 90%);
    text-align: center;
    font-family: metrobolditalic;
    font-size: 2rem;
    padding-top: 3rem;
    padding-bottom: 0rem;
}

内容的提问来源于stack exchange，提问作者dizzells