Question

我正在使用具有这样的父div的react使我的Web简历-

Ellipse

在这里我有多个子div，但是当我运行代码时，div的元素是滚动而不是页面。当我给父div设置高度但在某些浏览器上不能正常工作时，我需要一个好的解决方案，以便元素保持静态，并且页面滚动。

谢谢。

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

Answer 1

您可以尝试使用以下代码段更新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。

祝你好运...

Answer 2

删除CSS中“ landing_container__23Tq8”类的背景附着属性。

滚动页面而不是div元素

2 个答案: