How to fix WordPress admin bar destroying 100% height

I’m creating a web site that fits to the screen with WordPress.

When the site owner logs in, the admin bar will appear but it adds the following style:

Read More
html{ margin-top: 28px !important; }

This causes a vertical scroll bar to appear. Is there any way to fix this using just CSS?

Someone had a similar issue but he got no answer.

My relevant html structure:

<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>

And relevant 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%;
}

For the admin bar:

#wpadminbar {
  height: 28px;
  left: 0;
  min-width: 600px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
}

I’ve tried using (negative) margins and paddings, also setting the admin bar’s position to absolute instead of fixed but no luck.

Related posts

Leave a Reply

4 comments

  1. 2022 here.

    I recently noticed that WordPress has been setting a relevant CSS variable on the front-end when logged in as an admin:

    html {
      --wp-admin--admin-bar--height: 32px;
      scroll-padding-top: var(--wp-admin--admin-bar--height);
    }
    
    @media screen and (max-width: 782px)
      html {
        --wp-admin--admin-bar--height: 46px;
      }
    }
    

    This is very convenient, as it allows you to do things like this (making a hero element as high as the viewport, but subtracting the height of the admin bar):

    .hero {
      min-height: calc(100vh - var(--wp-admin--admin-bar--height));
    }
    

    There is a slight issue with that, though: If you’re not signed in as an admin, the CSS variable is not set, and this can break things like calculations.

    This can be fixed by checking for a body class that WordPress also sets:

    .hero {
      min-height: 100vh;
    }
    
    body.admin-bar .hero {
      min-height: calc(100vh - var(--wp-admin--admin-bar--height));
    }
    

    …but this can get messy rather quickly, so I came up with a little one-size-fits-all solution that I’ll probably be using a lot:

    body:not(.admin-bar) {
      --wp-admin--admin-bar--height: 0px;
    }
    

    This allows me to do things like this, and not having to worry about whether the user is logged in or not:

    .site-header {
      top: var(--wp-admin--admin-bar--height);
    }
    
  2. Look into wordpress/wp-includes/class-wp-admin-bar.php at the beginning, and you will find this. Watch closely the comments for the actual answer:

    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 contains the default implementation of _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
    }
    
  3. Try following:

    add_action('get_header', 'fix_adminbar');
    
    function fix_adminbar()
    {
        if (is_admin_bar_showing()) {
            remove_action('wp_head', '_admin_bar_bump_cb');
            add_action(
                'wp_head', function () {
                ob_start();
                _admin_bar_bump_cb();
                $code = ob_get_clean();
                $code = str_replace('margin', 'padding', $code);
                $code = preg_replace('/{/', '{ box-sizing: border-box;', $code, 1);
                echo $code;
            }
            );
        }
    }```