Reactjs

Question

我使用Reactjs并在html标记下面遇到意外的白色区域：

我检查了所有.css文件，找不到可能导致该问题的任何边距，填充或位置属性。当我使用Google Chrome检查器时，我无法检查该空白区域，因为它位于我的html标签下方（上图）。没有错误消息表明原因。

我的反馈应用程序结构：

以下是代码：

  

App.js：

import React, {Component} from 'react';
import Wrapper from './components/Wrapper';
import SongCard from './components/SongCard';
import songs from './songs.json';

class App extends Component {
    state = {
        songs
    };

    render() {
        return ([
            <div key={0}>
                <Wrapper>
                    {this.state.songs.map(song => (
                        <SongCard
                            key={song.id}
                            id={song.id}
                            name={song.name}
                            artist={song.artist}
                            src={song.src}
                        />
                    ))}
                </Wrapper>
            </div>
        ]);
    }
}

export default App;

  

Wrapper.js：

import React from 'react';
import './Wrapper.css';

const Wrapper = props => (
    <div className="row justify-content-center">
        <div className="col-lg-8">{props.children}</div>
    </div>
);

export default Wrapper;

Wrapper.css:
.row, .col-lg-8 {
    margin: 0;
    padding: 0;
    color: white;
    font-family: 'Amaranth', sans-serif;
}

  

SongCard.js：

import React from 'react';
import './SongCard.css';

const SongCard = props => (
    <div className="song-card">
        <div className="row">
            <div className="col-auto spotify-player">
                <iframe title={props.id} src={props.src} frameBorder="0" allowtransparency="true"></iframe>
            </div>

            <div className="col text-center song-info">
                <div>{props.name}</div>
                <div>{props.artist}</div>
            </div>
        </div>
        <div className="song-card-divider"></div>
    </div>
);

export default SongCard;

  

SongCard.css：

iframe {
    width: 100%;
}

.col, .col-auto, .song-card {
    margin: 0;
    padding: 0;
    background-color: #343a40;
}

.spotify-player {
    width: 80px;
    height: 80px;
}

.song-card-divider {
    height: 0;
    border-top: 1px solid #e9ecef;
}

我找到了答案但找不到任何答案。

Answer 1

我找到了问题的原因： iframe高度会导致页面底部出现额外的白色区域。我在这里发布我的答案，所以这个问题可以标记为已回答，希望它可以帮助那些有同样问题的人。