如何使浮動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來實現相同的視口寬度。