根据窗口大小调整 div 的大小以及里面的内容答案

【问题标题】：Resize div along with content inside according to window size根据窗口大小调整 div 的大小以及里面的内容
【发布时间】：2016-07-07 09:54:32
【问题描述】：

我已经查找了一百万种技术，但我无法让它发挥作用，我知道还有其他类似的帖子。对不起，如果它打扰了任何人，但我需要我的代码的具体说明，因为我很愚蠢。非常感谢您！我希望 div 容器 contentContactBox 以及其中的所有 div 在调整浏览器窗口大小时按比例调整大小。 contentcontactBox 的左侧是一些文本，右侧是嵌入的谷歌地图。我希望它们都随着窗口的大小成比例地缩小。

注意：我知道我可能需要从子 div 中取出 position: absolute

HTML：

<div id="contact" class="tab-pane fade in">
    <div id="contentBoxContact">
      <div id="map"></div>
      <div id="contact-content">
        <h1>Come see us downtown<br> and have a beer!</h1><br>
        <h2 style="text-decoration: underline">Phone Number:</h2>
        <h2>555-555-5555</h2><br>
        <h2 style="text-decoration: underline">Email:</h2>
        <h2>fakeemail@gmail.com</h2><br>
        <h2 style="text-decoration: underline">Address:</h2>
        <h2>
          Fake Place<br>
          414 2nd Avenue<br>
          Fake Location<br>
        </h2>
      </div>
    </div>
  </div>
</div>

CSS：

body {
  padding-top: 80px;
  width: 100%;
  height: 100%;
  color: white;
  background: url(/images/TaphouseTaps2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.tab-content{
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#contentBoxContact {
  margin-top: 54px;
  width: 1185px;
  height: 560px;
  margin-left: -593px;
  background: rgba(34,34,34,.75);
}

#contact-content {
  position: absolute
  margin-top: 8px;
  margin-left: 40px;
  line-height: 2px;
  font-family: Titillium Web, Arial, Verdana, sans-serif;
  color: white; 
}

#map {
  position: absolute;
  width: 600px;
  height: 500px;
  margin-top: 30px;
  margin-left: 550px;
}

【问题讨论】：

我忘了说我正在使用引导程序。

标签： html css formatting resize containers

【解决方案1】：

您可以使用 vw 值使 div 随窗口按比例缩小。

Example

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

CSS

.one {
  width: 20vw;
  height: 20vw;
  background-color: #76ccde;
  float: left;
  margin-left: 10px;
}

.two {
  width: 25vw;
  height: 25vw;
  background-color: #c976de;
  float: left;
  margin-left: 10px;
}

.three {
  width: 30vw;
  height: 30vw;
  background-color: #a7de76;
  float: left;
  margin-left: 10px;
}

【讨论】：

太棒了！你是我的英雄！我不敢相信我在任何地方都找不到。每当我搜索它时，人们都会使用这些非常复杂的技术，我知道必须有更简单的方法。
有没有办法让子 div 以相同的速度缩小，以便它们保持为一个单元？
以您的示例为例，如果您要将较小的放在较大的内部，它们会与窗口大小成比例地缩小，但不会相互缩小，因此随着窗口大小的缩小，它们会变得不合适。

【解决方案2】：

我认为你需要在子 div 中使用 px 而不是 % 并供父级使用

height: auto;
width:auto;

【讨论】：

我正在为子 div 使用 px...我会尝试使用 auto 作为父级，但我不认为它那么简单。
另外，如果我使用 auto 作为高度和宽度，那么如何设置 div 的宽度和高度。它是一个包含内容的盒子，所以我希望它有一定的大小。
最小高度：400 像素；最小宽度：400px;
如果你已经设置了孩子的宽度和高度，那么你不需要为父母设置任何东西，只需使用自动

【解决方案3】：

我建议你看看 Bootstrap。它以动态而闻名。如果屏幕尺寸发生变化，则该页面的整个 CSS 都会发生变化。这是一个链接：Bootstrap 3。希望对你有帮助:)

【讨论】：

我正在使用引导程序。