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

Question

I'm making my web resume using react having parent div like this -

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

In this I have multiple child div but when I run my code the elements of div are scrolling rather than the page.When I give height to parent div but it's not working fine on some browsers.I need a good solution so that elements remain static and page scrolls.

Thanks in advance.

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

Answer 1

You can try to update src/Pages/LandinPage.js with the following snippet.

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

Basically, the scrolling is fine; however, a background is missing from the About Me section onwards.

Good Luck...

Answer 2

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