时间戳

首页 > 解决方案 > wp 管理栏导致空白，添加填充导致滚动

html - wp 管理栏导致空白，添加填充导致滚动

问题描述

我正在创建我的第一个自定义 WordPress 主题。我正在调用并调用每个页面wp_head();中header.php的标题。这会导致正文顶部出现空白。为了摆脱这种情况，我在内容 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 标题空白。有可能我做的事情都错了，所以任何建议都值得赞赏。

标签： htmlcsswordpresswordpress-theming

解决方案

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

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

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

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

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

此链接导致替代堆栈溢出答案_祝你好运

推荐阅读