滚动页面而不是反应中的div元素

Question

我正在使用具有这样的父 div 的 react 来制作我的网络简历 -

 <div
        className={`w-100  d-flex flex-column align-items-center m-0 position-absolute ${styles.container} `}
      >

在此我有多个子 div，但是当我运行我的代码时，div 的元素正在滚动而不是页面。当我为父 div 提供高度但它在某些浏览器上无法正常工作时。我需要一个好的解决方案，以便元素保持静态，页面滚动。

提前致谢。

https://utkarsh0911.github.io/my_web_resume/

Answer 1

在您的 css 中删除类“landing_container__23Tq8”的背景附件属性。

Answer 2

您可以尝试使用以下 sn-p 更新src/Pages/LandinPage.js。

import React, { Component ,Text,StyleSheet} from 'react'
import Logo from '../Images/SiteLogo/logo.jpg'
import MyNav from '../Components/MyNav'
import styles from '../css/landing.module.css'
import { Button, Container } from 'react-bootstrap'
import MyButton from '../Components/MyButton'
import Myphoto from '../Images/MyPhoto/photo.png'
import MyRoundedImage from '../Components/MyRoundedImage'
import AboutMe from './AboutMe'
import Experience from './Experience'
import Skills from './Skills'
import MySimpleImage from '../Components/MySimpleImage'
import Education from './Education'
import resume from '../docs/resume.pdf'
import MyFooter from '../Components/MyFooter'
import MyJumbo from '../Components/MyJumbo'


class LandingPage extends Component
{
    render() {
        return (


          <div className={ `w-100 d-flex flex-column align-items-center m-0 position-absolute ${styles.container} `} >

              <div className="container ">
            <MyNav title="MyResume" items={["ABOUT","BLOG","CONTACT"]}/>
            </div>

            <div className="d-flex justify-content-center ">
<h1 className={`font-weight-bold text-white text-center  ${styles.h1}`}>WELCOME TO MY STUDIO!!</h1>
</div>


            <div className="d-flex flex-wrap justify-content-center mt-2 ">




            <a href={resume} target="_blank" rel="noopener noreferrer" download>

           <MyButton   title="Download CV" variant="success"/></a>




<MyButton  title="Subscribe" variant="success"/>


           </div>


<div className="d-flex  flex-wrap clearfix  mt-1 flex-wrap justify-content-center align-items-center">
        <MyRoundedImage src={Myphoto}/>
        </div>

  <div className="bg-white">
    <AboutMe />
    <MyJumbo title="EXPERIENCE"/>



     <div className={styles.expContainer}>
    <Experience/>

    </div>



    <MyJumbo title="SKILLS"/>
    <Skills/>



    <MyJumbo title="EDUCATION"/>
    <Education/>
  </div>

{/* <MyFooter/> */}

            </div>

        )
    }
}




export default LandingPage

基本上，滚动没问题；但是，background 从 About Me 部分开始丢失。

祝你好运……