如何使浮动 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

在不知道您的布局的情况下很难成功，但您是否研究过使用视口高度？元素的高度自动与用户所在设备的视口成比例：[=13=]

.element {
   height: 75vh;
}

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

如何使浮动 div 响应

How to make floating div responsive

html

css

scroll

floating

responsive-design