Google amp-lightbox：内容高于屏幕，无法滚动到顶部

Question

我尝试使用lightbox标记中的可滚动属性，使Google amp lightbox具有较长的文本，而不适合某些设备上的ligntbox。文本正在滚动，但无法滚动到文本的大部分顶部，顶部已隐藏。在html，css和两张图片下方，一张图片适合在灯箱中显示，另一张则滚动到顶部，但文字顶部不可见。注意：我不知道屏幕的高度，并且放大器中不允许使用自定义JavaScript，因此我无法使用iframe或带有溢出的div，因为它们需要高度。

Amp html部分：{$ law.text}替换为长文本

<amp-lightbox id="law-lightbox" layout="nodisplay" class="popup-lightbox" scrollable>
  <div class="popup-content">
    <div class="popup-content-header">
      <button type="button" on="tap:law-lightbox.close" class="popup-close">×</button>
      <h4 class="popup-header-title">{$law.title}</h4>
    </div>
    <div class="popup-content-body">
      {$law.text}  
    </div>    
  </div>
</amp-lightbox>

CSS：

.popup-lightbox{
  background: rgba(0,0,0,0.8);
}
.popup-content{
  background-color: #fff;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  left:  50%;
  width: 90%;
  max-width: 420px;
}
.popup-content-body {
    background-image: url("/i/site-bg.jpg");
  background-repeat: repeat;
  background-color: #E6D0BB;
    color: #603415;
    padding: 4px;
}
.popup-close{
  border: none;
  background-color: transparent;
  color: #E6D0BB;
  cursor: pointer;
  font-size: 1.5em;
  float: right;
  padding: 0px;
  margin: -4px 0px 0px 0px;
  text-decoration: none;
}
.popup-close:hover{
  color: #fff;
}
.popup-content-header {
  background-color: #603415;
    color: #E6D0BB;
    padding: 2px;
}
.popup-content-header h4 {
  padding: 2px;
  margin: 0px;
}
.popup-header-title {
}
.popup_field {
  width: 100%;
}

此图像滚动到顶部，但顶部文本的一部分被隐藏：

这是在更大的显示器上的外观：

Answer 1

.popup-content{
      max-height:100%;
      overflow:auto;
   }

应该有帮助。您永远不会设置高度或最大高度，而是将其居中，因此无论居中多长时间……如果要使其可滚动，则需要进行上述设置。最大高度可以达到任何高度的90％，您的顶部和底部会有一点空间:)