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

Question

我正在尝试制作带有长文本的 google amp 灯箱，在某些设备上不适合 ligntbox，在灯箱标签中使用可滚动属性。文本正在滚动，但无法滚动到文本的大部分顶部，顶部已隐藏。
下面是 html、css 和两张图片，一张带有适合灯箱的文本，另一张滚动到顶部，但文本顶部不可见。
注意：我不知道屏幕高度，并且 amp 中不允许使用自定义 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% 任何你都会从顶部和底部有一点空间:)