2

estoy haciendo mi primera web con react y me encuentro con un problema de CSS con height. Tengo un componente (checkout) y el height 100% no abarca todo el contenido de este componente. El padre de este componente (App.js) tambien tiene el height a 100% e incluso así sigue sin funcionar. He provado poner el height del hijo a auto y a inherit y ni así funciona. Puede ser que tenga algo que ver con el Router?

PADRE:

function App() {
return (
    <div >
      <header className="App">
        <img className='logo' src={logo} alt='NB' />
        <Router>
          <Nav user={user} cart={cart} clearStorage={clearStorage} />
          <Route exact path="/" render={(props) => <Home {...props} prodList={prodList} setProdList={setProdList} cart={cart} setCart={setCart} localCart={localCart} />} />
          <Route exact path="/cart" render={(props) => <Cart {...props} setCartTotal={setCartTotal} cartTotal={cartTotal} cart={cart} setCart={setCart} localCart={localCart} />} />
          <Route exact path="/checkout" render={(props) => <CheckOutPage {...props} setCartTotal={setCartTotal} cartTotal={cartTotal} cart={cart} setCart={setCart} localCart={localCart} />} />
          <Route exact path="/signin" render={(props) => <Signin {...props} user={user} setUser={setUser} setToHome={setToHome} toHome={toHome} />} />
          <Route exact path="/register" render={(props) => <Register {...props} userList={userList} setUserList={setUserList} />} />
          <Route exact path="/admin" render={(props) => <Admin {...props} prodList={prodList} setProdList={setProdList} />} />
        </Router>
      </header>

      <footer className="footer" >
      </footer>
    </div>

  );
}
export default App;

CHILD COMPONENT (Checkout):

const CheckOutPage = () => {
 return (
        <div className='checkout-form' id='register'>
            <form onSubmit={submitHandler}>
                <h2>Shipping information</h2>
                <div>
                    <input onChange={handleNameChange} name="name" value={name} type="text" placeholder='Name*' className='sign-input' />
                </div>
                <div>
                    <input onChange={handleLastNameChange} name="lastname" value={lastName} type="text" placeholder='Last Name*' className='sign-input' />
                </div>
            </form>
            <form onSubmit={submitHandler}>
                <h2>Payment details</h2>
                <div>
                    <input onChange={handleNameChange} name="name" value={name} type="text" placeholder='Name*' className='sign-input' />
                </div>
                <div>
                    <input onChange={handleLastNameChange} name="lastname" value={lastName} type="text" placeholder='Last Name*' className='sign-input' />
                </div>
                <div>
                    <input onChange={handleEmailChange} name="email" value={email} type="email" placeholder='e-mail*' className='sign-input' />
                    {emailmessage}
                </div>
                <div>
                    <input onChange={handleEmailChange} className='checkout-input-small' type="date"></input>
                    <input onChange={handleEmailChange} className='checkout-input-extrasmall' type="text" placeholder='CVV*'></input>
                </div>
                <button className='sign-input'>Confirm order</button>
                <div className='form-text'>
                    <p>Not sure yet?
                        <Link exact to="/cart">
                            , Go back to cart
                        </Link></p>
                </div>
            </form>
            <div >
                <h2>Items in bag</h2>
                <div className="checkout-cart">
                    <div>
                        {cartTotal > 49 ? <p>FREE SHIPPING</p> : null}
                    </div>
                    <hr className="free" />
                    {cart.map((item, idx) => (
                        <div key={idx} className="cart-box">
                            <img className="cart-img" src={item.image} alt={item.name} />
                            <div>
                                <div className="cart-box">
                                    <p>{item.name}</p>
                                </div>
                                <p>{item.price}€</p>
                                <div className="cart-box">
                                    <div className="cart-box">
                                        <p>Quantity</p>
                                        <p>{item.quantity}</p>
                                    </div>
                                    <p className="cart-stotal">{item.quantity * item.price}€</p>
                                </div>
                            </div>
                        </div>
                    ))}
                    <div className="cart-box">
                        <p>Total</p>
                        <p>{cartTotal}€</p>
                    </div>
                    <hr />
                </div>

            </div>
        </div>

    )
}

export default CheckOutPage

CSS: (ahora se ve como en la imagen ya que he puesto un min-height, pero necesito que sea responsive.

* {
  margin: 0;
  padding: 0; 
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.App {
  background-color: #95cfc6;
  min-height: 100%;
  height: 100%;
}
.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 2em 1.5em;
  margin-left: 10em;
  height: 100%;
}
.checkout-form {
    min-height: 32em;
    height: 100%;
    background-color:rgb(238, 236, 236);
    padding: 1em 4em 1em 4em;
    color:  rgb(77, 74, 74);
    display: grid;
    grid-template:  "1fr 1fr 1fr" 33.33vh;
    grid-gap: 1em 1em; 
    justify-content: space-evenly; 
  }

IMAGEN:

introducir la descripción de la imagen aquí

1 respuesta 1

0

Una de muchas formas es usar flexbox, en el ejemplo de abajo hay un container con tres boxes, las cuales ocupan el total de la altura de la pantalla, algo similar a tu codigo con las dos formas y un div:

html,
body {
    height: 100%;
}

.container {
    height: 100%;
  min-height: 100%;
    display: flex;
    flex-direction: row;
    }
    .box {
        text-align: center;
        color: white;
        font-size: 36px;
        display: flex;
        flex-direction: column;
    justify-content: center;
    }
    
    .box-1 {
        background-color: black;
        flex: 1
    }
    
    .box-2 {
        background-color: blue;
        flex: 1;
    }
    
    .box-3 {
        background-color: red;
        flex: 1;
    }
<div class="container">
    <div class="box box-1">box 1</div>
    <div class="box box-2">box 2</div>
    <div class="box box-3">box 3</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.