My Unique Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<style>
/*RESET BLOCK START ------------------------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* RESET CODE END --------------------------------------------------------------------------------- */
body
{
display:flex
;background-color:#20262b;min-height:100vh;
}
.column
{
display:flex;
flex-direction:column;
padding: 0;
/* flex:1; */
}
/* .flexContainers{display:flex;} */
#body__
{
background-color:#30364b;
padding: 0;
}
#body___header
{
/* display:flex; */
background-color:#10561b;
}
#body___middleSection
{
display:flex;
flex:auto;
background-color:#30363b;
}
#body___footer
{
background-color:#10561b;
}
</style>
</head>
<body class="">
<div id="body__" class="column">
<div id="body___header" class="flexContainer"><span class="">This is Header of body</span></div>
<div id="body___middleSection" class="flexContainer"><span class="">This is cntnt of body</span></div>
<div id="body___footer" class="flexContainer"><span class="">This Footer of body</span></div>
</div>
</body>
</html>This is my Custom Layout
Observing the above code, there appears to be padding after the content "This Footer of body".
A puzzling issue, as I am unsure of the source of this padding.
As a result, the page is minimally scrollable vertically in Firefox. Ideally, the page should not be scrollable unless additional content is present.
How can this be rectified?
Special Note
If you execute the snippet provided here, you will notice a slight vertical scroll, which is not the intended behavior.
Note Added
The color of the small space at the bottom matches that of the body tag. Hence, I suspect the issue lies in either the bottom padding of the body or the bottom margin of the div with id body__