Горизонтальная полоса прокрутки не отображается в DIV, хотя переполнение установлено на автоматический

Question

У меня есть Div с изображением, которое меняет свой размер при событиях щелчка. Div должен реагировать, отображая полосы прокрутки, когда это необходимо.

   <div id="DisplayGraph" runat="server">
   <asp:image runat="server" id="Graph" CssClass="Graph"/>
   </div>

CSS

#DisplayGraph {
height: 100%;
width: 100%;
transform-origin: left top;
position:fixed;
top: 37px;
left:0px;
overflow:auto;
}

.Graph {
vertical-align: top;
text-align:left;
}

ТОЛЬКО вертикальная полоса прокрутки отображается. Если я удалю тег переполнения из CSS, вертикальная полоса прокрутки исчезнет - это доказывает, что CSS действительно работает.

Так почему же горизонтальная полоса не отображается?

Answer 1

Высота #DisplayGraph составляет 100% от родительского элемента, но затем к фиксированному элементу применяется верхнее смещение в 37px, то есть относительно области просмотра.Поэтому последние 37px элемента будут скрыты.

Вам просто нужно вычесть верхнее смещение из высоты вашего контейнера.

#DisplayGraph {
height: calc(100% - 37px);
width: 100%;
transform-origin: left top;
position:fixed;
top: 37px;
left:0px;
overflow:auto;
}