如何使内容 div 可滚动？反应和 CSS

Question

Learning React.js framework and need some pointers on styling.学习 React.js 框架，需要一些样式指导。 CSS isn't my forte. CSS 不是我的强项。

How do I style the static content div in the middle and make it scrollable only within the div?如何在中间设置静态内容 div 的样式并使其仅在 div 内可滚动？

No styling:无造型：

https://i.imgur.com/26wNAfH.jpg https://i.imgur.com/26wNAfH.jpg

How to style this?如何设计这个？

https://i.imgur.com/c5nYCOz.jpg https://i.imgur.com/c5nYCOz.jpg

Here's the scroll function:这是滚动功能：

https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/part%202.mp4 https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/part%202.mp4

app.css应用程序.css

.name {
  font-weight: bold;
  font-size: 20px;
}
.centered {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}
.center {
  position: fixed;
  width: 500px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px; /* Negative half of height. */
  margin-left: -250px; /* Negative half of width. */
}

.content {
  text-align: center;
  border: 2px solid grey;
  border-radius: 5px;
  position: fixed;
  /* center the div */
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  /* give it dimensions */
  min-height: 10em;
  width: 90%;
  /* just for example presentation */
  top: 5em;
  background-color: white;
}

Output: https://i.imgur.com/Eyv6hab.png输出： https : //i.imgur.com/Eyv6hab.png

HTML: HTML：

import React, { Component } from "react";
import "../App.css";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";

const API = "https://www.hatchways.io/api/assessment/students";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      students: [],
      isLoading: false,
      error: null
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });
    fetch(API)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error("Something went wrong ...");
        }
      })
      .then(data =>
        this.setState({ students: data.students, isLoading: false })
      )
      .catch(error => this.setState({ error, isLoading: false }));
  }

  render() {
    const { students, isLoading, error } = this.state;

    if (error) {
      return <p>{error.message}</p>;
    }

    if (isLoading) {
      return <p>Loading ...</p>;
    }

    return (
      <body>
        <div className="content">
          <div>
            {students.map(student => (
              <div key={student.id}>
                <p>
                  <img src={student.pic} />
                </p>
                <p className="name">
                  {student.firstName} {student.lastName}
                </p>
                <p>Email: {student.email}</p>
                <p>Company: {student.company}</p>
                <p> Skill: {student.skill}</p>
                <p>Average: {student.grades}</p>
              </div>
            ))}
          </div>
        </div>

        {/* <div class="card mb-3">
          {students.map(student => (
            <div class="row no-gutters">
              <div class="col-md-4">
                <img src={student.pic} class="card-img" alt="..." />
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">
                    {student.firstName} {student.lastName}
                  </h5>
                  <p class="card-text">
                    <p>Email: {student.email}</p>
                    <p>Company: {student.company}</p>
                    <p> Skill: {student.skill}</p>
                    <p>Average: {student.grades}</p>
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div> */}
      </body>


    );
  }
}

export default App;

Answer 1

This might not help I am unfamiliar with that JS framework.这可能无助于我不熟悉该 JS 框架。 I am only posting this because nobody has answered and maybe this can help.我发布这个只是因为没有人回答，也许这会有所帮助。

<style>    
    scroll
{
    max-height: 400px;
    overflow-y: scroll;
}
</style>

<div class="scroll">

如何使内容 div 可滚动？反应和 CSS

问题描述

1 个解决方案

解决方案1
6 2019-04-23 19:08:52

如何使内容 div 可滚动？ 反应和 CSS

问题描述

1 个解决方案

解决方案1 6 2019-04-23 19:08:52

如何使内容 div 可滚动？反应和 CSS

解决方案1
6 2019-04-23 19:08:52