Seeking assistance in utilizing Flexbox to occupy 100% of my computer screen's height, all while ensuring responsiveness:
View of my current sign-in page on Chrome (Note the whitespace):
Examining my existing frontend code:
const SignIn = () => {
return (
<RuxContainer className="container">
<div slot="header" className="header-container">
<h3 className="first-header-item">LOGO</h3>
<RuxClock timezone="Z"></RuxClock>
<RuxMonitoringIcon status="normal"></RuxMonitoringIcon>
</div>
<div className="body-container">
<form className="rux-form">
<h2 className="body-sign-in">SIGN IN</h2>
<h6>Measure your success in the Space Force!</h6>
<div className="sign-in-inputs">
<rux-input
id="email"
placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c386aea2aaaf83a2b0b7b1ceda0acae">[email protected]</a>"
label="Email"
type="email"
ruxblur="{handleValidation()}"
></rux-input>
<rux-input id="pw" label="Password" type="password"></rux-input>
</div>
<div className="sign-in-helper-functions">
<rux-checkbox class="checkbox">Remember me</rux-checkbox>
<p className="forgot-password">Forgot Password?</p>
</div>
<div className="sign-in-container">
<rux-button className="sign-in-btn" type="submit">
Sign in
</rux-button>
</div>
</form>
</div>
<div slot="footer" className="footer">
<p>hi</p>
</div>
</RuxContainer>
);
};
export default SignIn;
Moreover, here is my CSS code utilizing flexbox:
body {
margin: 0;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.body-container {
display: flex;
flex-direction: column;
align-items: center;
}
.rux-form {
width: 30%;
max-width: 430px;
}
.sign-in-helper-functions {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.forgot-password {
margin: 0;
color: white;
text-decoration: underline;
text-decoration-color: #1976d2;
}
.sign-in-container {
display: flex;
justify-content: end;
width: 100%;
margin-top: 20px;
}
.footer {
background-color: #172635;
}
I have attempted adjustments to the main html and body tags, but no solution seems to suffice.