Реагируйте: делайте коробки одинакового размера даже с разным содержимым

Question

Я написал веб-сайт, который вы можете увидеть здесь: https://konekto.world/

После регистрации вы заметите, что размер почти белого внешнего поля на каждом экране разный (особенно на https://konekto.world/emergency_details). Я хочу иметь фиксированную высоту для блока (которую я мог бы даже сделать зависимой от размера экрана). Не могли бы вы помочь мне, где и как в моем коде я мог сделать код того же размера. Что я делал дотеперь имеет следующий эффект: https://konekto -k8x5umx6o.now.sh

Emergencydetails / index.js

import React from 'react';
import axios from 'axios';
import { withRouter } from 'react-router-dom';
import { withStyles } from '@material-ui/core/styles';
import { Container, Grid } from '@material-ui/core';
import { Header } from '../Layout';
import FormPersonType from './FormPersonType';
import FormEmergencyType from './FormEmergencyType';
import Textbox from './Textbox';
import AppContext from '../utils/AppContext';
import CONST from '../utils/Constants';
import ProgressiveMobileStepper from './ProgressiveMobileStepper';

const styles = theme => ({
  containerWhenIPhone: {
    alignItems: 'center',
    height: '515.5px',
    //width: '414.4px',
    maxWidth: 'sm',
    border: 'black',
    'border-width': 'medium',
    'margin-top': '50px',
    background: 'rgba(255, 255, 255, 0.8)',
    'border-radius': '20px'
  },
  container: {
    alignItems: 'center',
    height: '60%',
    border: 'black',
    'border-width': 'medium',
    'margin-top': '50px',
    background: 'rgba(255, 255, 255, 0.8)',
    'border-radius': '20px'
  },
  item: {
    width: '100%',
    'text-align': 'center',
    'border-radius': '5px',
    'margin-top': '5px',
    'justify-content': 'center'
  },
  container2: {
    border: 'black',
    'border-width': 'medium',
    'margin-top': '30px'
  },
  picture: { display: 'block', margin: '0 auto' },
  box: { width: '230px' }
});
class SOS extends React.Component {
  static contextType = AppContext;

  constructor(props) {
    super(props);
    this.state = {
      timerOn: false,
      componentType: 'type_of_emergency', //type_of_person //texbox
      ambulance: false,
      fire_service: false,
      police: false,
      car_service: false,
      meAffected: false,
      anotherPerson: false,
      activeStep: 0
    };
    this.classes = props.classes;
    this.handleNext = this.handleNext.bind(this);
    this.handleBack = this.handleBack.bind(this);
    this.handleEmergencyType = this.handleEmergencyType.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  showSettings(event) {
    event.preventDefault();
  }

  handleNext(e) {
    if (this.state.componentType === 'type_of_emergency') {
      this.setState({ componentType: 'type_of_person' });
    } else if (this.state.componentType === 'type_of_person')
      this.setState({ componentType: 'textbox' });
    else if (this.state.componentType === 'textbox') {
      this.props.history.push('/transmitted_data');
    }
    this.setState({ activeStep: this.state.activeStep + 1 });
  }

  handleBack(e) {
    if (this.state.componentType === 'textbox') {
      this.setState({ componentType: 'type_of_person' });
    } else if (this.state.componentType === 'type_of_person') {
      this.setState({ componentType: 'type_of_emergency' });
    } else if (this.state.componentType === 'type_of_emergency') {
      this.props.history.push('/emergency_sent');
    }
    this.setState({ activeStep: this.state.activeStep - 1 });
  }

  handleEmergencyType(new_emergency_state) {
    console.log(new_emergency_state);
    this.setState(new_emergency_state);
  }

  onSubmit(e) {
    console.log('in OnSubmit');
    axios
      .post(CONST.URL + 'emergency/create', {
        id: 1,
        data: this.state
      })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    let component;

    if (this.state.componentType === 'type_of_emergency') {
      component = (
        <FormEmergencyType
          handleComponentType={this.handleComponentType}
          handleEmergencyType={this.handleEmergencyType}
          emergencyTypes={this.state}
          timerStart={this.timerStart}
          onSubmit={this.onSubmit}
        />
      );
    } else if (this.state.componentType === 'type_of_person') {
      component = (
        <FormPersonType
          handleComponentType={this.handleComponentType}
          personTypes={this.state}
        />
      );
    } else if (this.state.componentType === 'textbox') {
      component = <Textbox handleFinished={this.handleFinished} />;
    }

    return (
      <React.Fragment>
        <Header title="Specify Details" BackButton="true" />
        <Container
          component="main"
          className={this.classes.containerWhenIPhone}
        >
          <Grid
            container
            className={this.classes.container}
            direction="column"
            spacing={2}
          >
            <Grid item sm={12} className={this.classes.item}>
              {component}
            </Grid>
          </Grid>
          <Grid
            container
            className={this.classes.container2}
            direction="column"
            spacing={2}
          >
            <Grid item sm={12} className={this.classes.item}>
              <ProgressiveMobileStepper
                handleNext={this.handleNext}
                handleBack={this.handleBack}
                activeStep={this.state.activeStep}
              />
            </Grid>
          </Grid>
        </Container>
      </React.Fragment>
    );
  }
}
export default withRouter(withStyles(styles)(SOS));
//   <Container component="main" maxWidth="sm">

Я условно отрисовываюFormPersonType, FormEmergencyType и Textbox, но они не содержат стилей.

Спасибо за помощь!

Answer 1

Добавьте min-height: 60vh вместо height: 60%, который будет работать с фиксированной высотой.

также для контейнера-потомкаисправить:

  .containerWhenIPhone{
    overflow: auto;
    box-sizing: content-box;
  }