居中的DIV没有完全以小分辨率显示，

Question

在像540x960和960x540这样的小分辨率中，我的页面有奇怪的行为。这些分辨率不应该是完全响应的，它们必须向上/向下滚动或向左/向右滚动以查看完整内容。问题在于居中的DIV。

HTML：

<div class="age-warning-content">

  ....


</div>

CSS：

.age-warning-content {

  background:white !important;  
  width:630px;
  height:550px;     
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

它会像这样裁剪中心DIV的一部分：

• 如果是540x960，则左侧部分被裁剪（不可见）。可以向右侧滚动内容，但无法向左滚动以查看该部分。

• 如果是960x540，那么顶部会被裁剪（不可见）

我用响应式CSS修复了上半部分。但我没有在左侧工作。

@media screen and (min-width: 360px) and (max-width: 779px) {
    .age-warning-content {


        margin-top: 90px;


    }

}

问题：中心DIV在小分辨率下无法完全显示。在PC和Iphone 6屏幕上出现问题。

Answer 1

这是因为您应用的宽度大于相应的屏幕尺寸

如果可能，您可以应用max-width:630px; width: 80%;和max-height:550px; height: 80%;

像我在这里做的那样

.age-warning-content {
  background:white !important;  
  max-width:630px;
  width: 80%;
  max-height:550px;     
  height: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

请参阅fiddle