响应式div高度 - Bootstrap

Question

请问有人能帮忙查找我的错误吗？请点击链接查看出现问题的网站：点击这里。

我无法使绿色框在高度上响应变化。它可以随着宽度的改变而缩放，但是高度始终不变。我希望它可以同时改变高度和宽度，以适应屏幕大小。

非常感谢您的帮助，因为我真的不知道可能出了什么问题。

谢谢。

- Pinky_P

---

高度也会根据屏幕宽度进行调整。在设备上尝试了一下页面，它是响应式的。 - Nitesh Goyal

嗨Nitesh， 谢谢你的回复！当您在移动设备或平板电脑上打开时，它是响应式的。 然而，客户想要的不是在不同的笔记本电脑/桌面屏幕上打开时必须向下滚动才能看到完整的联系表格，而是将位置固定，并且绿色框随着屏幕调整大小以适应屏幕（如果有意义的话？）。目前，您必须向下滚动一点才能看到带有联系表格的绿色框。 - Pinky_P

抱歉，我不需要向下滚动查看联系表单。但是，您可以尝试将页面顶部的填充缩小为140像素。 - Nitesh Goyal

那么在您的设备上（请问屏幕分辨率是多少？），您可以看到绿色框中的完整联系表单，而无需向下滚动吗？ 我试图尽量减少页面顶部的填充，但问题在于在更大的屏幕上（1200像素以上），绿色框不在屏幕中央（这就是为什么页面顶部有140像素填充的原因）。 您有任何想法/建议如何解决这个问题吗？ 谢谢。 - Pinky_P

Answer 1

你可以尝试将高度设置为auto/100%。

或者

这可能不是您要寻找的，但我遇到了类似的问题，媒体查询帮助我解决了它。

你设置一个最小宽度，然后根据它来设置div的高度。

 @media only screen and (min-width: 768px) {
         .loginbox
         {
          height: 120px; / height: 50%;
         }
     }

您可以参考W3schools中的媒体查询相关内容。 媒体查询。

- Sadiqali Zaveri

Answer 2

你可以尝试在Bootstrap中使用相对于视点的规则： 相对于视点。它会创建一个规则，使得你的div元素在任何设备上都能占据100%的屏幕空间。以下是一个示例：
<div class="min-vw-100">最小宽度100vw</div><div class="min-vh-100">最小高度100vh</div><div class="vw-100">宽度100vw</div><div class="vh-100">高度100vh</div>

- Giorgi Gvimradze