`why is the content overflowing the body and the html?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" href="mainpage.css">
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<div class="main1">hhjfhjgfhkgfhghfhg Lorem, ipsum dolor sit amet consectetur adipisicing elit. In debitis odit aliquam nobis voluptas numquam repudiandae itaque fugiat, voluptates laborum doloribus asperiores dolore autem, accusantium sapiente explicabo fuga facilis? Culpa aliquid exercitationem sequi, quae doloremque non quia vero corporis dignissimos? Ab reiciendis eum, ducimus sit modi consequatur beatae, qui corporis sint possimus est cupiditate laboriosam, quae veritatis ea provident? Accusamus eum reiciendis nemo, vitae iste illum iure beatae sit omnis non modi ex expedita laudantium unde illo minus rerum nesciunt et maiores facilis cum explicabo id ad? Et fugiat neque laborum? Qui, ex asperiores pariatur illum fugit porro aliquam neque laboriosam quis aperiam unde esse perspiciatis explicabo quibusdam aliquid praesentium iusto odit repellat magni iste ratione debitis cumque inventore. Sint esse dolor quidem laboriosam rem iure quaerat, numquam explicabo nulla odio quasi hic aut, repudiandae inventore quisquam? Commodi praesentium nesciunt quod possimus consectetur quae sint, eum at dolore ullam laboriosam ea expedita a veritatis esse rem quibusdam in voluptatem autem non officia eligendi alias doloremque! Modi iusto vitae hic voluptatem rem ullam pariatur! Obcaecati hic aliquam voluptatem distinctio provident est minima tempora ipsam ea! Perspiciatis animi rerum eos molestiae quam quo quae voluptatum delectus magnam. Explicabo molestias blanditiis culpa voluptatem cupiditate, libero perferendis iste cum eum nostrum quisquam architecto voluptate ipsam nobis, earum numquam ea consectetur magnam illo in cumque aperiam? Magni laboriosam fugiat et, quos repudiandae omnis doloremque impedit aut ipsa aperiam harum cumque eos debitis itaque obcaecati pariatur vitae excepturi quae explicabo doloribus consequatur, tempore at. Distinctio, inventore corrupti ea fugit non quos voluptas. Consequuntur optio, sint distinctio, ab blanditiis alias esse ratione non accusantium labore dolor deserunt. Modi enim, distinctio saepe expedita nesciunt a necessitatibus cumque error debitis possimus? Consequuntur dolorum eveniet fugit sunt, blanditiis maxime eos praesentium aut veniam incidunt officia sapiente reprehenderit nisi explicabo modi, quas facilis necessitatibus earum ab. Provident minus impedit quaerat hic aliquam ab eius ea, eos minima omnis sequi iusto maiores quos. Hic quis rem non consequatur et, labore, eos in tempore consequuntur repudiandae, vitae suscipit iure. Aspernatur aut architecto necessitatibus vel, fugiat totam. Cumque quisquam, at incidunt labore nobis dolore possimus deserunt accusamus numquam, earum id doloribus facilis enim sit optio quas veritatis ex laborum modi dolorum! Magni iste adipisci quos ab delectus aperiam animi ex, nemo culpa recusandae aspernatur temporibus quisquam voluptatum dicta impedit, officia eum mollitia expedita sit, neque asperiores fugit consequuntur illum. Tempore provident neque commodi optio accusamus officia nesciunt, maxime reprehenderit at sequi quam possimus suscipit quae ratione iusto, quia in? Praesentium quae est adipisci tempore officia porro autem at deleniti natus, unde a eum placeat fugiat eligendi soluta enim optio non in incidunt velit atque ducimus! Esse ab eos similique aperiam neque eligendi, itaque consequatur dolor nesciunt exercitationem voluptatem, laboriosam et, consequuntur in! Assumenda architecto, excepturi porro cum optio quam neque iste ad iusto, fugit perferendis consequuntur eligendi praesentium! Nihil nostrum ipsum eveniet. Quaerat, quos mollitia cumque impedit ex deleniti nam nesciunt tempora maiores corporis adipisci cum! Aliquam consequatur possimus provident sunt eos corrupti quaerat?
</div>
<div class="table"></div>
<div class="main2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate quod molestiae sequi eveniet earum eligendi explicabo consectetur ipsum fuga omnis quisquam asperiores, aspernatur cum sit voluptas, nemo, cumque at enim nesciunt dicta dolore dolorem. Recusandae quibusdam similique fuga ad sapiente reiciendis odit unde facilis magnam neque quam, quod rem, dolorum doloribus assumenda temporibus itaque, minus deleniti! Illo voluptatibus cum perferendis quo asperiores quod qui, a ab rem rerum sapiente alias mollitia quisquam vitae assumenda? Dolorum architecto quae odit quis, quia cum consequuntur ipsum, quos expedita officiis tenetur exercitationem? Veniam sit blanditiis rerum, iste aspernatur voluptatem quas provident quae ab delectus maxime cupiditate nulla, unde, a reprehenderit nemo dolorem aperiam nisi libero accusamus officiis ipsum omnis? Eos voluptatum nulla animi delectus reiciendis in provident ipsum asperiores, eligendi culpa corporis expedita nostrum nam est mollitia velit, vel distinctio illo? In itaque cupiditate porro consequuntur quia. Dolorum assumenda, mollitia culpa iure laboriosam nostrum quos nemo aut, at maiores et quae ipsa nobis modi numquam. Asperiores molestias quisquam, corrupti repellendus ea provident nihil distinctio, officiis praesentium, neque sint saepe sequi harum natus. Quis dignissimos maxime nam voluptatibus velit, sunt modi quae suscipit unde officia id tenetur sed magnam nulla quia ad numquam eligendi non possimus voluptas maiores quisquam autem? Culpa non totam, quas incidunt corporis architecto iste! Modi sapiente cumque eos aut. Odio iusto velit iste ipsum perspiciatis dolor modi molestias temporibus hic incidunt officiis deleniti sit eius accusamus recusandae quasi quas doloribus tempora aut voluptates tempore corrupti, vel sunt exercitationem? Asperiores voluptatibus odit quos cupiditate sunt quidem officiis aliquid consectetur, animi cumque velit dolor, necessitatibus nisi sapiente amet dolores atque accusamus dignissimos adipisci consequatur? Non sequi nisi quas nihil aliquid quo nemo ipsum ipsa corporis voluptatem. Natus et ad saepe tempora expedita, iste laboriosam inventore numquam rem molestiae facere ab debitis dolorum ipsam, velit laudantium ex suscipit possimus ducimus! Neque vitae quod ducimus sit, est vero porro ea velit quas dicta, non maiores perspiciatis quam officia laudantium voluptas. Pariatur repudiandae dicta natus eum ut maxime corrupti obcaecati ipsum at esse alias molestiae quaerat qui ratione dolores adipisci sunt quos, cum quo voluptates nobis atque, eveniet aperiam quibusdam. Autem aspernatur, qui placeat molestiae dolorum necessitatibus? Ratione sapiente dignissimos aliquid, vitae quaerat vero maiores omnis eos ullam. Odio exercitationem, atque ad, officiis repudiandae facilis quas mollitia alias esse et vitae totam eaque porro similique recusandae autem vero quod reiciendis delectus iusto illum perspiciatis? Excepturi, ex.</div>
</main>
<footer></footer>
</body>
</html>
`I used "lorem text" to check the flow
`
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 100%;
min-height: 100vh;
display: grid;
grid-template-rows: 17% auto 5%;
grid-template-areas: "header header header"
"main main main"
"footer footer footer";
}
header{
background-color: navajowhite;
grid-area: header;
display: grid;
grid-template-rows:40% auto ;
grid-template-areas: "nav nav";
}
main{
border: black;
}
nav{
border: solid red 2px;
grid-area: nav;
}
main{
background-color: beige;
grid-area: main;
display: grid;
grid-template-rows: auto 20% auto;
grid-template-areas: "main1 main1 main1"
"table table table"
"main2 main2 main2";
}
.main1{
border: 2px blueviolet solid;
grid-area: main1;
}
.table{
border: 2px solid black;
grid-area: table;
}
.main2{
grid-area: main2;
border: seagreen 2px solid;
}
footer{
background-color: blanchedalmond;
grid-area: footer;
}
i was making a lay out for my page and i was making a bulding block for the page but, I can't find where I made a mistake, I have tried also to set the height on the html but it won't change. I want the footer to stick at the bottom and the header to stick at the top and the main part to stay in the middle
I replaced your all of your auto by fr and I changed grid-template-rows of your main. This should work and you should not even need to set a height on the html or body anymore. Hope this help.
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
body{
width: 100%;
display: grid;
grid-template-rows: 17% 1fr 5%;
grid-template-areas: "header header header"
"main main main"
"footer footer footer";
}
header{
background-color: navajowhite;
grid-area: header;
display: grid;
grid-template-rows:40% 1fr ;
grid-template-areas: "nav nav";
}
nav{
border: solid red 2px;
grid-area: nav;
}
main{
border: black;
background-color: beige;
overflow: hidden;
grid-area: main;
display: grid;
grid-template-rows: 4fr 2fr 4fr;
grid-template-areas: "main1 main1 main1"
"table table table"
"main2 main2 main2";
}
.main1{
border: 2px blueviolet solid;
grid-area: main1;
}
.table{
border: 2px solid black;
grid-area: table;
}
.main2{
grid-area: main2;
border: seagreen 2px solid;
}
footer{
background-color: blanchedalmond;
grid-area: footer;
}