I have a problem that I have been trying to solve for a long time, and I can not, that is to leave the layout of the site taking the whole page, it stays that way. link (print as is)
Note that it takes up only 70% of the screen, so the code looks like this.
//login.js
class Login extends Component {
render() {
return (
<div className="container" id="container-login">
<div>
<h2 className="mb-5">Form subscription</h2>
<form>
<p className="h5 text-center mb-4">Subscribe</p>
<Input label="Your name" icon="user" group type="email" validate error="wrong" success="right"/>
<Input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
<div className="text-center">
<Button color="deep-orange" color="indigo">Send</Button>
</div>
</form>
</div>
</div>html{
border:black;
border-style: solid;
border-width: 2px;
}
body{
border:rgb(92, 252, 0);
border-style: solid;
border-width: 2px;
}
#root{
border: gold;
border-style: solid;
border-width: 2px;
background-image: url("./img/download.jpg");
}
#div-app{
border: royalblue;
border-style: solid;
border-width: 2px;
}
#div-main{
border: red;
border-style: solid;
border-width: 2px;
}
#container-login{
border:rgb(147, 9, 160);
border-style: solid;
border-width: 2px;
}I put a border on each div to try to better explain my problem,
The only way I managed to make it work was by setting a (height: 100%;) in all from HTML up to # container-login, this caused it to take 100% of the screen,
Follow the image link
I thought the problem would have solved, but when I put the resolution simulating a cell phone along with more forms and buttons the screen bursts down and the div does not come together.
follow image link
In this example here link can make it clearer what happens.