srcmini我正在创建我的第一个自定义WordPress主题。我打电话给wp_head();在header.php中, 并在每个页面中调用标题。这会导致主体顶部出现空白。为了摆脱这种情况, 我在内容div的顶部和底部添加了1px的填充。问题是, 这将导致每个页面滚动, 无论其内容是否足以滚动。如果你尚未登录, 则滚动为2px。如果是, 则为2px加wp标头的高度。
我尝试过在body和content div上使用溢出设置, 但似乎没有任何进展。
我也尝试设置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最小高度中的填充, 而不是添加填充(这会导致滚动)。
评论前必须登录！
注册