为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕沐林林 2023-03-18 16:25:58
我正在使用具有父 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/
查看完整描述

1 回答

?
人到中年有点甜

TA贡献1895条经验 获得超7个赞

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

您可以尝试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


基本上,滚动很好;但是,abackground从后面的部分开始就不见了About Me。


祝你好运...


查看完整回答
反对 回复 2023-03-18
  • 1 回答
  • 0 关注
  • 73 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号