响应式 div 高度 - Bootstrap答案

【问题标题】：Responsive div height - Bootstrap响应式 div 高度 - Bootstrap
【发布时间】：2017-03-30 12:41:39
【问题描述】：

谁能帮我找出我做错了什么吗？请点击链接查看有问题的网站-click here

我无法让绿色框响应高度。它在宽度上缩放，但高度保持不变。我想让它一起调整大小，以便绿色框同时调整高度和宽度并适合屏幕。

任何帮助将不胜感激，因为我真的不知道那里可能有什么问题。

谢谢

【问题讨论】：

高度也会根据屏幕的宽度进行调整。尝试了设备上的页面，因为它是响应式的。
您好，Nitesh，谢谢您的回复！当您在手机或平板电脑上打开它时，它是响应式的。但是，客户想要的是当您在不同的笔记本电脑/台式机屏幕上打开它时不必向下滚动以查看完整的联系表格，位置是“固定的”并且绿色框会随着屏幕调整大小以适应屏幕（如果这使得有什么意义吗？）目前，您必须向下滚动一点才能看到带有联系表格的绿色框。
很抱歉，我无需向下滚动即可查看联系表。但是，您可以尝试将页面顶部的内边距 140 像素最小化。
那么在您的设备上（请问是什么屏幕分辨率？）您可以在绿色框中看到完整的联系表格，而无需向下滚动？我试图最小化页面顶部的填充，但问题是在更大的屏幕（大 1200 像素）上，绿色框不在屏幕中间（这就是顶部有 140 像素填充的原因这页纸）。你有什么想法/建议可以解决这个问题吗？谢谢

标签： twitter-bootstrap responsive

【解决方案1】：

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

或

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

您设置一个最小宽度，并根据您设置 div 的高度。

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

媒体查询可以参考 W3schools

Media Queries

【讨论】：

【解决方案2】：

您可以尝试相对于 Bootstrap 中的视点规则： Relative to view point 。它制定了一个规则，您的 div 100% 的屏幕独立于您的设备。这是一个示例：
<div class="min-vw-100">Min-width 100vw</div><div class="min-vh-100">Min-height 100vh</div><div class="vw-100">Width 100vw</div><div class="vh-100">Height 100vh</div>

【讨论】：