如何使浮动div响应答案

【问题标题】：How to make floating div responsive如何使浮动div响应
【发布时间】：2015-11-04 09:26:32
【问题描述】：

我有一个在浮动 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%;
}

【问题讨论】：

你能在小提琴中显示 html 和 css 吗？或者你可以给网页的网址
jsfiddle.net/Snurainiyakob/V4u5X/892 类似这样
你使用的弹窗可能有问题

标签： html css scroll responsive-design floating

【解决方案1】：

你可以设置overflow:hidden来包装里面的所有元素

CSS

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

【讨论】：

无法响应，因为我无法向下滚动表单
它正在工作（chrome，firefox）...模态的背景包含内部的所有元素，甚至响应...你能更好地指定你的问题吗
我在表单中添加了更多元素，当我加载时，当我让它响应时的背景并没有像我上传的照片示例那样覆盖整个表单。
您有一些影响响应方式的 css（可能是媒体查询）...检查所有 css 并查看您的模态中是否有一些“最小高度”或“高度”跨度>
请在 stackoveflow 上提出一个新问题...同时是一个 jsfiddle -jsfiddle.net/luispa/V4u5X/924

【解决方案2】：

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

.element {
   height: 75vh;
}

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

【讨论】：