Mar*_*oDS 5 html css wordpress layout viewport
我正在创建一个适合Wordpress屏幕的网站。
网站所有者登录后，将显示管理栏，但添加了以下样式：
html{ margin-top: 28px !important; }
这将导致出现垂直滚动条。有什么方法可以仅使用CSS来解决此问题？
有人有类似问题，但他没有答案。
我相关的html结构：
<html>
<body>
<div id="page">
<div class="site-main" id="main">
<div class="content-area" id="primary">
<div role="main" class="site-content" id="content">
</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->
</div><!-- #main .site-main -->
</div><!-- #page -->
<div id="wpadminbar">
</div>
</body>
</html>
和相关的CSS：
html, body, #page {
width: 100%;
height: 100%;
min-width: 350px;
margin: 0;
padding: 0;
}
#main {
height: 100%;
}
#primary {
float: right;
width: 100%;
margin-left: -200px;
height: 100%;
}
#content {
margin-left: 250px;
height: 100%;
}
对于管理栏：
#wpadminbar {
height: 28px;
left: 0;
min-width: 600px;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
}
我已经使用（负）边距和补试，管理栏的设置也position以absolute代替fixed，但没有运气。
2022 年在这里。
\n我最近注意到，当以管理员身份登录时， WordPress已经在前端设置了相关的 CSS 变量：
\nhtml {\n --wp-admin--admin-bar--height: 32px;\n scroll-padding-top: var(--wp-admin--admin-bar--height);\n}\n\n@media screen and (max-width: 782px)\n html {\n --wp-admin--admin-bar--height: 46px;\n }\n}\n这非常方便，因为它允许您执行类似的操作（使英雄元素与视口一样高，但减去管理栏的高度）：
\n.hero {\n min-height: calc(100vh - var(--wp-admin--admin-bar--height));\n}\n不过，这有一个小问题：如果您\xe2\x80\x99没有以管理员身份登录，则不会设置CSS变量，这可能会破坏计算等内容。
\n这可以通过检查WordPress也设置的主体类来修复：
\n.hero {\n min-height: 100vh;\n}\n\nbody.admin-bar .hero {\n min-height: calc(100vh - var(--wp-admin--admin-bar--height));\n}\n\xe2\x80\xa6但这很快就会变得混乱，所以我想出了一个通用的解决方案，我\xe2\x80\x99可能会经常使用它：
\nbody:not(.admin-bar) {\n --wp-admin--admin-bar--height: 0px;\n}\n这允许我做这样的事情，而不必担心用户是否登录：
\n.site-header {\n top: var(--wp-admin--admin-bar--height);\n}\nwordpress/wp-includes/class-wp-admin-bar.php从头开始看，你就会发现这一点。仔细观察评论以获得实际答案：
if ( current_theme_supports( 'admin-bar' ) ) {
/**
* To remove the default padding styles
* from WordPress for the Toolbar,
* use the following code:
* add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
*/
$admin_bar_args = get_theme_support( 'admin-bar' );
$header_callback = $admin_bar_args[0]['callback'];
}
if ( empty($header_callback) )
$header_callback = '_admin_bar_bump_cb';
add_action('wp_head', $header_callback);
wordpress/wp-includes/admin-bar.php包含以下默认实现_admin_bar_bump_cb：
/**
* Default admin bar callback.
*
* @since 3.1.0
*/
function _admin_bar_bump_cb() { ?>
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>
<?php
}