尽管溢出设置为自动，但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;
}