Div位置固定导致滚动条隐藏在它后面

Question

我的网页上有一个div，我已将其定位 -

<div class="dropdown-options" style="display: none; height: 61px; position: fixed; left: 18%; width: 500px; top: 50px; background-color: #f7f7f7; z-index: 1; width: 100%;" id="dropdown">
    <table class="navigation nav-collapse" style="height: 61px;">
        ...
        ...
    </table>
</div>

样式 - left: 0;已应用，因为左侧有一个侧边栏，占据页面宽度的18％。

我希望div取其父级的全宽，因此宽度设置为100％。 问题是 - 无论何时显示（通过JS），该div都会隐藏它后面的滚动条。 以下是问题的屏幕截图 -

当div未显示时 -

显示div时 -

如何显示滚动条不会被隐藏？