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

Question

我正在尝试制作 google 带有长文本的 amp 灯箱，不适合某些设备上的灯箱，使用灯箱标签中的可滚动属性。文本正在滚动，但无法滚动到文本的最顶部，顶部已隐藏。
在 html、css 下方和两张图片，一张的文字适合灯箱，另一张滚动到顶部，但文字顶部不可见。
注意：我不知道屏幕高度，并且在 amp 中不允许自定义 javascript，所以我不能使用 iframe，或者 div with overflow 因为它们需要高度。

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% 任何你都会有一点 space 从顶部和底部 :)

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

Google amp-lightbox: content higher then screen, not possible to scroll to top

css

amp-html