Отрезание содержимого после определенной высоты с помощью реакции-бутстрапа

Question

У меня проблемы с адаптацией моего приложения реагирования, я использую React-Bootstrap для создания своего портфолио, но столкнулся с проблемой, из-за которой сайт выглядел хорошо в портретном режиме.Но когда дело доходит до того, что сайт выглядит хорошо, пейзаж выглядит не так жарко, контент обрезается на определенной высоте области просмотра.Я хочу, чтобы содержимое можно было прокручивать независимо от высоты области просмотра, но это не позволяет мне это делать.

Я использую React-bootstrap, чтобы выложить эту страницу, и я новичок в React, но у меня есть некоторыеопыт использования bootstrap, поэтому использование response-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', чтобы добавить пространство под содержимым и сделать его прокручиваемым .