如何使浮动div响应

Question

我有一个以浮动div编码的寄存器页面。但是，它不能以响应方式完美加载。我想制作一个固定的高度，以确保当用户在不同设备中查看时，将修复背景颜色 #ebebeb 。不幸的是，当我试图改变身高的百分比时，它没有什么不同。

https://jsfiddle.net/Snurainiyakob/V4u5X/892/

CSS

.modaloverlay .regmodal {
  background-color: #ebebeb;
  height: 100%;
  position: relative;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 60em) {
  .modaloverlay .regmodal {
    height: 87%;
    margin: 5% auto;
    max-height: 57em;
    max-width: 66em;
    width: 29%;
  }
}

.modaloverlay .regmodal > iframe, .modaloverlay .regmodal > div {
  border: none;
  height: 100%;
}

Answer 1

您可以设置overflow:hidden来包装

中的所有元素

<强> CSS

.modaloverlay .regmodal {
  background-color: #ebebeb;
  height: 100%;
  position: relative;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
}

Answer 2

在不了解您的布局的情况下，这是一个很长的镜头，但您是否考虑过使用视口高度？元素的高度自动与用户所在设备的视口成比例：

.element {
   height: 75vh;
}

上述内容基本上可以确保.element是任何设备视口的75％高度。同样，您也可以使用vw来实现视口宽度的相同。