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

标签 html css wordpress wordpress-theming

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

我尝试过在正文和内容 div 上使用溢出设置,但似乎没有任何进展。

我还尝试设置内容 div position: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 标题空白。我可能做的事情都是错误的,所以任何建议都是值得赞赏的。

最佳答案

您看到的空白是由 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 _祝你好运

关于html - wp 管理栏会导致空白,添加填充会导致滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57861381/

相关文章:

javascript正则表达式不起作用

html - SVG 颜色悬停 - 找不到任何解决方案

php - 学习多个内容管理系统的成本/ yield

html - 对齐居中 CSS 和 After CSS

html - 如何使用 CSS 和一些 JS 来布局这样的表单?

javascript - 将 span 元素向右移动到 div 标签

html - CSS Flexbox 右对齐响应式

使用 mouseenter 的 jQuery 下拉菜单

javascript - WordPress 排队数据表库和 CSS

php - WooCommerce 获取订单商品单一价格(无数量乘法)