JQuery-UI аккордеон в режиме наполнения и перелива - постороннее 2px

Question

В this fiddle PoC, мне нужно уменьшить высоту моего JQuery-UI аккордеона двумя дополнительными необъяснимых пикселей, если я хочу, чтобы избавиться от переполнения вертикальной прокрутки.

• Я в 'fill'heightStyle режим, как показано ниже.
• Высота моего аккордеона - это высота тела минус высота нижнего колонтитула и заголовка. Minus 2 пикселя.
• все библиотеки находятся в последних версиях (на момент написания), кроме jquery не в '3'.
• Я знаю о accordion.refresh() и css flex, но мне любопытно, «почему», и я предпочел бы использовать calc(), прежде чем я надену свой CSS с помощью гибких ящиков.

$(function() { 
 
    $("#accordion").accordion({heightStyle: 'fill' }); 
 
    });

html, body { 
 
    height: 100%; 
 
    } 
 
    :root{ 
 
    --header-height: 40px; 
 
    --footer-height: 40px; 
 
    --two-unexplained-px: 2px; 
 
    } 
 
    body { 
 
    overflow:auto; 
 
    background-color: red; 
 
    } 
 
    * { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    } 
 
    #header, #footer { 
 
    background-color: #adf; 
 
    } 
 
    #header { 
 
    height: var(--header-height); 
 
    } 
 
    #footer { 
 
    height: var(--footer-height); 
 
    } 
 
    #accordion { 
 
    height: calc(100% - var(--header-height) - var(--footer-height) - var(--two-unexplained-px)); 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 
<div id="header">Header here</div> 
 
<div id="accordion"><h2><a>Work here</a></h2><div>Text Here</div></div> 
 
<div id="footer">Footer here</div>

Answer 1

Два дополнительных пикселей приходят из этого правила:

.ui-accordion .ui-accordion-header { 
    margin: 2px 0 0 0; 
}