wp管理栏导致空格,添加填充导致滚动

我正在创建我的第一个自定义WordPress主题。我打电话给wp_head(); 在header.php中, 并在每个页面中调用标题。这会导致主体顶部出现空白。为了摆脱这种情况, 我在内容div的顶部和底部添加了1px的填充。问题是, 这将导致每个页面滚动, 无论其内容是否足以滚动。如果你尚未登录, 则滚动为2px。如果是, 则为2px加wp标头的高度。
我尝试过在body和content div上使用溢出设置, 但似乎没有任何进展。
【wp管理栏导致空格,添加填充导致滚动】我也尝试设置content div的位置:absolute; 溢出:自动。这在我注销时修复了它, 但是在我登录到管理页面时添加了滚动。

body { margin: 0; width: 100%; background-color: rgb(255, 192, 203); //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-->

我想要的页面内容不足以保证滚动不滚动, 同时也隐藏wp标头空白。我可能会把事情全都弄错了, 所以任何建议都值得赞赏。
#1你看到的空白是由WP管理栏_引起的
关于此差距, 堆栈溢出中有几种问题/答案组合
在我的WP定制主题中, 我不会尝试解决CSS问题。我通过functions.php处理它
// remove logged in header bar add_filter( 'show_admin_bar', '__return_false' );

希望这也能解决你的问题_, 但是请不要忘记删除为解决问题而添加的CSS
此链接导致替代堆栈溢出答案_祝你好运
#2最有可能的原因是页边距折叠:尽管.content DIV没有顶部或底部边距, 但其中的第一个元素的边距(通常是< h1> 元素, 默认情况下顶部和底部的边距都很大) “ 伸出” DIV, 并在其父级内容DIV上方创建边距。与下边距和最后一个子元素相同(例如, 可能是< p> 标记, 也具有默认边距)。这就是导致你描述的空白的原因。
你已经找到了解决此问题的方法:内容容器上的1px填充。因此, 你只需添加box-sizing:border-box到你的.content DIV中, 其中包括100vh最小高度中的填充, 而不是添加填充(这会导致滚动)。

    推荐阅读