在填充模式和溢出jQuery的用戶界面手風琴 - 外來的2px

Question

在this fiddle PoC，我需要用兩個額外的原因不明像素降低我的jQuery的用戶界面手風琴的高度，如果我想擺脫溢出垂直滾動條。

• 我在'fill'heightStyle模式，如下所示。
• 我的手風琴的高度是身體的高度減去頁腳和頁眉的高度。 減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; 
}