In the process of creating my very first custom WordPress theme, I encountered an issue with whitespace at the top of the body. This was caused by calling wp_head(); in header.php and including the header on each page. To offset this whitespace, I added a 1px padding to the top and bottom of my content div. The drawback is that every page then displayed a scroll bar, regardless of its content length. If not logged in, a 2px scroll bar appears; if logged in, it's 2px plus the height of the wp header.
Despite several attempts to adjust the overflow settings on the body and content divs, I have not been successful in resolving the issue.
One approach I tried was setting the content div with
position: absolute; overflow: autobody {
margin: 0;
width: 100%;
background-color: rgb(255, 192, 203); //Color used to highlight any white space.
}
.header {
width: 15vw;
height: 100vh;
padding: 0 1vw;
position: fixed;
background-color: rgb(51, 51, 51);
}
.content {
padding: 1px 0;
margin-left: 17vw;
background-color: rgb(20, 20, 20);
color: white;
min-height: 100vh;
}
<!--header.php-->
<body>
<?php wp_head(); ?>
<div class="header"></div>
<!--end header.php-->
<!--page.php-->
<?php get_header(); ?>
<div class="content">
All the page content goes here.
<div>
<?php get_footer(); ?>
<!--end page.php-->
<!--footer.php-->
<?php wp_footer(); ?>
</body>
<!--end footer.php-->
I am seeking a solution where pages with insufficient content won't display a scroll bar and will hide the wp header whitespace. Any guidance or suggestions on alternative methods would be greatly appreciated.