根据窗口大小将div与内容一起调整大小 [英] Resize div along with content inside according to window size

问题描述

我已经查了一百万的技术，我不能得到这个工作，我知道还有其他类似的帖子。我很抱歉，如果它错误的人，但我需要我的代码具体说明因为我愚蠢。提前谢谢你！我想要div容器contentContactBox，以及其中的所有div，在浏览器窗口调整大小时按比例调整大小。 contentcontactBox的左侧是一些文本，右侧是嵌入的谷歌地图。我希望它们都按照窗口的大小按比例缩小。

注意：我知道我可能需要取出位置：absolute div

HTML：

 < div id =contactclass =tab -pane淡入> 
< div id =contentBoxContact> 
< div id =map>< / div> 
< div id =contact-content> 
< h1>快来看看我们的市中心< br>并有啤酒！< / h1>< br> 
< h2 style =text-decoration：underline>电话号码：< / h2> 
< h2> 555-555-5555< / h2>< br> 
< h2 style =text-decoration：underline>电子邮件地址：< / h2> 
< h2> [e-mail]< h2>< br> 
< h2 style =text-decoration：underline>地址：< / h2> 
< h2> 
假地方< br> 
 414 2nd Avenue< br> 
假冒位置< br> 
< / h2> 
< / div> 
< / div> 
< / div> 
< / div> 
  

CSS：

  body {
 padding-top：80px; 
宽度：100％; 
身高：100％; 
颜色：白色; 
 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：所有1s易于进出; 
 -o-transition：所有1s易于进出; 
转换：全部1s进出; 
} 
 
 #contentBoxContact {
 margin-top：54px; 
 width：1185px; 
 height：560px; 
 margin-left：-593px; 
背景：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; 
颜色：白色; 
} 
 
 #map {
 position：absolute; 
 width：600px; 
 height：500px; 
 margin-top：30px; 
 margin-left：550px; 
 
  

解决方案

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

示例 一个>< / DIV>
< div class =two>< / div>
< div class =three>< / div>

CSS

  .one {
 width：20vw; 
身高：20vw; 
背景颜色：＃76ccde; 
 float：left; 
 margin-left：10px; 
} 
 
 .two {
 width：25vw; 
身高：25vw; 
背景颜色：＃c976de; 
 float：left; 
 margin-left：10px; 
} 
 
 .three {
 width：30vw; 
身高：30vw; 
背景颜色：＃a7de76; 
 float：left; 
 margin-left：10px; 
} 
  

I have looked up a million techniques and I can't get this to work and I know there is other posts similar to this. I'm sorry if it bugs anyone but I need specific instructions for my code cuz me stupid. Thank you so much in advance! I want the div container contentContactBox, along with all of the divs inside it, to proportionally resize when the browser window is resized. On the left side of the contentcontactBox is some text and on the right is a google map imbed. I want them all to shrink proportionally with the size of the window.

Note: I know I probably need to take out position: absolute out of the children divs

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>[e-mail]</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;
}

解决方案

You can use the vw value to make divs that shrink proportionally with the window.

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与内容一起调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！