如何在SCSS中为所有section元素统一设置背景色

解决方案 #

问题由两处样式规则错误导致，按以下步骤修改即可实现需求：

1. 修正calc()函数语法
   CSS规范中calc()的运算符两侧必须添加空格，否则浏览器无法正常解析该属性，会直接忽略高度规则，导致容器高度塌陷。
2. 将固定高度改为最小高度
   你当前设置的固定高度仅能容纳一屏内容，若内部多个子组件总高度超过一屏，超出部分不会显示背景色。改为min-height可以保证容器最少占满剩余视口高度，内容超出时自动撑开，背景色同步延伸。

修改后的app.scss代码如下：

.app{
    height: 100vh;
    .sections{
        background-color: lightsalmon;
        width:100%;
        min-height: calc(100vh - 70px);
        position: relative;
        top: 70px;
    }
}

如果修改后子组件区域依然没有显示背景色，检查每个子组件（Intro、Portfolio等）是否设置了不透明的背景色覆盖了父级容器的背景，按需删除子组件的背景色规则即可。

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