我正在创建我的第一个自定义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最小高度中的填充, 而不是添加填充(这会导致滚动)。
推荐阅读
- WPBakery页面构建器在主题的UI页面中显示代码
- PowerShell小技巧(通过 PowerShell实现日志关键字分析)
- css|【CSS 基础】CSS复合选择器
- 解读kubernetes集群常用资源yaml文件
- #yyds干货盘点#设计模式之策略模式
- #yyds干货盘点#使用U_BOOT_CMD()自定义uboot命令
- 进程查看和进程管理
- 进程与计划任务管理
- #yyds干货盘点# web安全day9(5个实验实实在在学习windows域部署)