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: