Question

这是我们的代码。的CSS：

   .mydiv 
    {

        position: absolute;
        background-color: white; 
        margin-top:40px;
        display: block;
        left: 50%;
        transform: translate(-50%, 0);
        max-width:10%;
        max-height:30%;
        overflow: auto;
     }

体

 <div class="mydiv">
    <img border="0" src="http://atldunia.com/youtube/FixedP7.jpg" /> 
</div>

此div会自动调整内容的大小。两个滚动条都按需显示。但是，我们无法添加右对齐的按钮并显示在滚动外部，使其始终可见。

http://atldunia.com/youtube/FixedPosPopup7.htm

Answer 1

我假设你想添加一个“关闭”按钮。如果是这样，您可以将内容包装在另一个图层中，并将按钮添加到第一个。

.popup-wrapper { display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:400px; max-height:400px; overflow:hidden; }

.popup-close { display:block; position:absolute; right:0; top:0; width:32px; height:32px;
 background:#404040; line-height:32px; vertical-align:middle; text-align:center; font-size:24px;
 color:#909090; cursor:default; }

.popup-close:hover { background:#808080; color:#c0c0c0; }

.popup-content { display:block; position:relative; width:100%; height:100%; overflow:auto; }

.popup-content > img { display:block; position:relative; width:auto; height:auto; }

<div class="popup-wrapper">
  <div class="popup-content"><img src="http://atldunia.com/youtube/FixedP7.jpg"/></div>
  <span class="popup-close">&times;</span>
</div>

你需要根据自己的喜好修改一些东西，但是你明白了。

CSS - 使用滚动条在动态大小div上添加右对齐按钮

1 个答案: