css - 使用react-bootstrap在一定高度后切断内容

Question

我在使我的 React 应用程序响应时遇到问题，我正在使用 React-Bootstrap 创建我的作品集，但我遇到了一个问题，我让网站在纵向模式下看起来不错。但是当涉及到使网站看起来不错的景观时，它看起来并不那么热门，内容在特定的视口(viewport)高度被截断。我希望无论视口(viewport)高度如何，内容都可以滚动，但它不允许我这样做。

我正在使用 React-bootstrap 来布置这个页面，我是 React 的新手，但我有一些使用 bootstrap 的经验，所以使用 react-bootstrap 有点困难

这是我的CSS

    @import url('https://fonts.googleapis.com/css?family=Roboto');

    .wrapper-3 {
      position:relative ;
      top: 20%;
      height: 100vh;
    }

    .Contact {
      color: white;
      font-family: Roboto;
      font-size: 3em;
    }

    .Email {
      color: white;
      font-size: 1.7em;
    }

    .underline-contact {
      border: 2px solid white;
      border-radius: 6px;
      width: 10em;
    }

    @media screen and (max-width: 690px) {
      #contact-icons {
        margin-right: 3%;
      }
    }

    @media screen and (max-height: 429px) {
      .wrapper-3 {
        margin-top: 20em;
      }
    }

    @media screen and (max-width: 444px) {
      #contact-icons {
        margin-right: 2%;
      }

      .contact-icon {
        font-size: 3em;
      }
    }

    @media screen and (max-width: 382px) {
      .Email {
        font-size: 1.6em;

      }
    }

    @media screen and (max-width: 372px) {
      .contact-icon {
        font-size: 2.5em;
      }
    }

    @media screen and (max-width: 367px) {
      .Email {
        font-size: 1.4em;
      }
    }


    @media screen and (max-height: 391px) {
      .contact-row {
        position: relative;
        top: 5em;
      }
    }


    @media screen and (max-height: 369px) {
      .wrapper-3 {
        top: 10em;

      }
    }

    @media screen and (max-height: 361px) {
      .wrapper-3 {
        top: 11em;

      }
    }

这是我的jsx

import React from 'react';
import { Container, Col, Row } from 'react-bootstrap';
import './Contact.css';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

library.add(fab)

class Contact extends React.Component {
  render() {
    return  (
      <div>
        <Container className="content" fluid>
          <div className="wrapper-3">
            <div className="contact-row">
              <Row className="justify-content-center">
                <Col xs="auto">
                  <h1 className="Contact">Contact</h1>
                  <hr className="underline-contact"></hr>
                </Col>
              </Row>
              <Row className="mt-3 justify-content-center">
                <Col xs="auto">
                <h3 className="Email">harrisonjones5678@gmail.com</h3>
                </Col>
              </Row>
              <Row
              className="justify-content-center ml-5 mt-5"
              id="contact-icons">
                <Col xs="auto">
                  <FontAwesomeIcon className="icon one contact-icon"
                  icon={['fab', 'git']}
                  size="6x"
                  style={{color: '#FFFFFF'}} />
                </Col>
                <Col xs="auto">
                <FontAwesomeIcon className="icon two contact-icon"
                icon={['fab', 'linkedin']}
                size="6x"
                style={{color: '#FFFFFF'}} />
                </Col>
                <Col xs="auto">
                <FontAwesomeIcon className="icon three contact-icon"
                icon={['fab', 'instagram']}
                size="6x"
                style={{color: '#FFFFFF'}} />
                </Col>
              </Row>
            </div>
          </div>

        </Container>
      </div>

    )
  }
}
export default Contact;

Answer 1

内容太短，无法滚动。您可以将 padding-bottom 和 margin-bottom 添加到 .contact-row 以便您可以在内容下方添加空间并使其成为 可滚动。