Resize div along with content inside according to window size

问题

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

回答1:

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

回答2:

i think u need to use px instead of % in child div and for parent use

height: auto;
width:auto;

回答3:

I suggest you take a look into Bootstrap. It's known for being dynamic; if the screen size changes, the whole CSS for that page changes. Here's a link: Bootstrap 3. Hope it helps :)

来源：https://stackoverflow.com/questions/36121738/resize-div-along-with-content-inside-according-to-window-size

标签

html

css

formatting

resize

containers