Question

当屏幕不是全尺寸时，我的Reactjs项目正在显示空格，并向右滚动。当我将窗口调整为小于完整大小的大小时，一切似乎都很好，也就是说，直到我向右滚动时，空格才会出现在屏幕的右侧。如果有人知道，请告诉我。一直在网上寻找这个答案。请在下面查看我的代码和图片。

我尝试将父容器的宽度和高度更改为100％，高度：100vh，宽度：100vw等。

[![//Home.js

import React from "react";
import NavBar from "./NavBar";
import Footer from "./Footer"
import Collapsible from "react-collapsible";

const Home = () => {


    return(
        <div>
        <div className="homebackground">
        <NavBar/>
        <div className="homeContent">
            <div className="homeItems">
            <h1 className="sectionTitle">MusicFlo Lyric Search</h1>
            <span className="sectionText">
                Ever had a song running through your head, but you don’t know who sings it or what it’s called? LyricFind’s Lyric Search helps answer the age-old question of “What IS the name of that song?”.
                By searching the actual lyrics, not only can you “Name That Tune,” but you can create playlists based on lyrics and subjects of songs. Imagine making a playlist of songs about San Francisco by simply searching the lyrics for “San Francisco”, “Frisco”, or other relative keywords. If your users can’t search based on the lyrics, they’re missing a key way to interact with your content and service!
                Pricing for LyricFind’s Lyric Search services is available on a per-display, per user, per month, or revenue share model. We can also customize a solution to fit your unique business needs. LyricFind can deliver lyric search results via XML, JSON API or data feed, allowing maximum flexibility for your implementation.
            </span>
            <img src="https://lyricfind.com/bing-internet.png"/>
            <h2 className="subheading">With just one click or press away from enjoying fast and accurate lyrics to your favorite songs</h2>
            <img className="phoneImage" src="https://spotifysupport.freetls.fastly.net/article-gallery/articles2/iphone/iphone_genius.png"/>
            <div className="banner">
                <h2 className="subheadingplayer">Enjoy your lyrics on the go</h2>
                <img src="https://media.giphy.com/media/2ce7MFH4E6UaTCyj79/giphy.gif"/>
            </div>
            </div>

        <div className="cardList">
        <h4 className="cardListHeader">Used by a variety of companies</h4>
            <div class="card cardProps" style={{width:"20vw"}}>
                <img src="https://cdn.vox-cdn.com/thumbor/QUUkN7Wwu7tcS175T6xgxbFV4mw=/81x0:779x465/1200x800/filters:focal(81x0:779x465)/cdn.vox-cdn.com/uploads/chorus_image/image/47116110/Screen_Shot_2014-12-01_at_10.55.10_AM.0.0.png" class="card-img-top" alt=""/>
                <div class="card-body">
                    <p class="card-text">Pandora Radio is a music streaming and automated music recommendation internet radio service powered by the Music Genome Project. The service, operated by Sirius XM Satellite Radio, is available in the United States. The service plays songs that have similar musical traits. </p>
                </div>
            </div>
            <div class="card cardProps" style={{width:"20vw"}}>
                <img src="https://smhttp-ssl-73418.nexcesscdn.net/tech/en/wp-content/uploads/sites/2/2018/10/spotify.jpg" class="card-img-top" alt=""/>
                <div class="card-body">
                    <p class="card-text">Spotify is a Swedish audio streaming platform that provides DRM-protected music and podcasts from record labels and media companies.</p>
                </div>
            </div>
            <div class="card cardProps" style={{width:"20vw"}}>
                <img src="http://tizonia.org/img/google-play-music-logo.png" class="card-img-top" alt=""/>
                <div class="card-body">
                    <p class="card-text">Google Play Music is a music and podcast streaming service and online music locker operated by Google. The service was announced on May 10, 2011, and after a six-month, invitation-only beta period, it was publicly launched on November 16, 2011.</p>
                </div>
            </div>
            <img className="pikasticker" src="https://media.giphy.com/media/31vamYdZV5ISQ/giphy.gif"/>
            <h2 className="subheadingpikachu">Even Pikachu can't resist!</h2>
        </div>
        </div>
        <div className="jumbotron jumbo faq">
            <h1>MusicFlo FAQ</h1>
            <Collapsible className="btn btn-success btn-lg" trigger="Start here">
                <h2>This is the collapsible content. It can be any element or React component you like.</h2>
                <p>It can even be another Collapsible component. Check out the next section!</p>
            </Collapsible>
        </div>
        <div className="downloadandsave">
            <h3>Download and save lyrics for ease of access where internet is unavailable</h3>
            <img className="downloadIcon" src="http://simpleicon.com/wp-content/uploads/cloud-download-2.png"/>
            <span className="plus">+</span>
            <img  className="saveIcon" src="http://www.pngmart.com/files/7/Save-PNG-Transparent-Image.png"/>
        </div>
        <div className="getStartedButton">
            <button className="btn btn-primary btn-lg">Get Started Today For Free</button>
        </div>
        <Footer/>
        </div>
        </div>
    );
}

export default Home;






//App.css



.homeContent {
  width: 50%;
  display: flex;
  flex-direction: row;
  margin-left: 10%
}

.cardProps {
  margin-bottom: 20px;
  margin-top: 20px
}


.cardList {
 margin-left: 15vw;

}

.container {
  background-image: url("https://research.fb.com/wp-content/uploads/2018/05/music-hero2.jpg");
  background-repeat: no-repeat;

}

.cardListHeader {
  margin-top: 60px
}

.navBarLogo {
  width:5vw;
  height: 5vh;
  border-radius: 50%
}


.navBarGroup {
  display: flex;
  flex-direction: row;
}

.homebackground {
  background-color: antiquewhite;
  height:100%;
  width:100%
}

.subheading {
  font-style: italic;

}

.phoneImage {
  margin-left: 120px;
  margin-top: 50px
}

.banner {
  display: flex;
  flex-direction: row
}


.subheadingplayer {
  font-style: italic;
  margin-top: 160px
}

.subheadingpikachu {
  font-style: italic;
  margin-top: 10px
}

.pikasticker {
  height:250px;
  width:250px;
  margin-top: 130px
}

.getStartedButton {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  margin-bottom: 200px;
}

.footercontainer {
  background-color: black;
  height:40vh;
  width:100vw

}

.footertext {
  color:white
}

.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.jumbo {
  background-image: url("https://ak9.picdn.net/shutterstock/videos/14887459/thumb/4.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  color:antiquewhite;

}

.downloadIcon {
  width: 20vw;
  height:30vh
}

.saveIcon {
  width: 20vw;
  height:20vh
}

.plus {
  font-weight: bold;
  font-size: 5vw
}

.downloadandsave {
  display:flex;
  flex-direction: row
}

.downloadandsavesubheading {
  font-style: italic;
  width: 30vw;
  margin-left: 30px;
  margin-top: 70px
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }][1]][1]

预期结果：向右滚动后，较小尺寸窗口的右侧不留空格。

实际结果：滚动到右侧后，较小尺寸窗口的右侧为空白

在reactjs中向右滚动时显示空白

0 个答案: