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

2022-01-24 00:00:00 resize containers formatting html css

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

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.

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

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>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;
}

推荐答案

你可以使用 vw 值让 div 随窗口按比例缩小.

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

示例

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;
}

相关文章