如何在 scss 中的所有部分元素上应用背景颜色

Question

基本上，我将组件导入 App.jsx 并调整 app.scss

中的部分

这是App.jsx

import Contact from "./components/contact/Contact";
import Intro from "./components/intro/Intro";
import Portfolio from "./components/portfolio/Portfolio";
import Testimonials from "./components/testimonials/Testimonials";
import Topbar from "./components/topbar/Topbar";
import Works from "./components/works/Works";
import './app.scss'

function App() {
  return (
    <div className="app">
      <Topbar/>
      <div className="sections">
        <Intro/>
        <Portfolio/>
        <Works/>
        <Testimonials/>
        <Contact/>
      </div>
    </div>
  );
}

export default App;

这是app.scss

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

它应该看起来像这样：Target

现在看起来像这样：Current

Answer 1

您错过了 100vh 减去 70px 之间的 space height: calc(100vh-70px);

像这样添加 space : height: calc(100vh - 70px);

有关更多信息，请查看下面的代码

.app{
    height: 100vh; 
}
.header{
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
      background-color: #ddd;
      height: 70px;
}
.sections{
    background-color: lightsalmon;
    width:100%;
    height: calc(100vh - 70px);
    position: relative;
    top: 70px; 
}

<div class="app">
  <div class="header">
  
  </div>
  <div class="sections">
  
  </div>
</div>

如何在 scss 中的所有部分元素上应用背景颜色

How to apply background color on all section elements in scss

css

sass

reactjs