Currently, I am working on developing a website using only percentages. However, I have encountered an issue with my main content section. I have set a margin-top of 10%, but this is causing excessive spacing at the bottom of the page and resulting in a scroll bar appearing.
https://i.sstatic.net/6qKns.png
Upon examining the image provided, you will observe that while the main content does not extend beyond the page, extra space is being generated at the bottom, as indicated by the appearance of the scroll bar.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main"></div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
background: pink;
position: relative;
}
.main {
margin-top:10%;
height: 600px;
width: 960px;
background: blue;
}