wp 管理栏导致空白，添加填充导致滚动答案

【问题标题】：wp admin bar causes whitespace, adding padding causes scrollwp 管理栏导致空白，添加填充导致滚动
【发布时间】：2020-01-11 15:44:11
【问题描述】：

我正在创建我的第一个自定义 WordPress 主题。我在header.php 中调用wp_head(); 并在每一页中调用标题。这会导致正文顶部出现空白。为了摆脱这种情况，我在内容 div 的顶部和底部添加了 1px 填充。问题是这会导致每个页面滚动，无论它是否有足够的内容滚动。如果你没有登录，它是一个 2px 的滚动条。如果是，则为 2px 加上 wp 标头的高度。

我尝试过在 body 和 content div 上使用溢出设置，但似乎没有成功。

我也尝试设置内容 div position: absolute; overflow: auto。这在我注销时修复了它，但在我登录管理页面时添加了一个滚动条。

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 标题空白。有可能我做的事情都错了，所以任何建议都值得赞赏。

【问题讨论】：

标签： html css wordpress wordpress-theming

【解决方案1】：

您看到的空白是由 WP 管理栏引起的 _

Stack Overflow 上有几个关于这个差距的问题/答案组合

在我的 WP 定制主题中，我不会尝试使用 CSS 来解决问题。我通过functions.php接近它

// remove logged in header bar
add_filter( 'show_admin_bar', '__return_false' );

希望这也能解决您的问题 _ 但不要忘记删除您可能添加的任何 CSS 以尝试处理问题

This link leads to alternative Stack Overflow answers_祝你好运

【讨论】：

仅供参考 _ 有一个用于 Wordpress 的 Stack Exchange，您可能想考虑加入 >>> wordpress.stackexchange.com __ 这是 Stack Exchange 针对同一问题的另一组解决方案 >>> @ 987654323@
就是这样，添加填充是我找到的解决方案，但这给了我滚动问题。我没有想过完全隐藏管理栏。这将是一个完全解决这个问题的简单方法。谢谢你的主意！也感谢您提供 WP 社区链接！
这只有在我删除了内容顶部 H1 的上边距时才有效，正如其他评论所建议的那样。
很好地找到了解决方案 _ 并感谢您的提升 _ 做得好 @Johannes 提供了解决方案的另一半 _ 我很高兴它为您解决了 :)

【解决方案2】：

这很可能是由于折叠边距：虽然.content DIV 没有顶部或底部边距，但其中第一个元素的边距（通常是<h1> 元素，默认情况下具有相当大的顶部和底部边距）“伸出” DIV 并在其父级内容 DIV 上方创建一个边距。与底部边距和最后一个子元素相同（例如，可能是 <p> 标签，它也有默认边距）。这就是导致您描述的空白的原因。

您已经找到了解决此问题的方法：内容容器上的 1px 填充。因此，您只需将box-sizing: border-box 添加到您的.content DIV，包括 100vh min-height 中的填充，而不是添加它（这会导致滚动）。

【讨论】：

box-sizing: border-box 将高度设置为 100%，而不是 100vh。
您对折叠边距的评论正是修复它的原因。一旦我删除了 H1 的边距，它就起作用了，但前提是我隐藏了 wp 管理栏，正如其他评论所建议的那样。