ブラウザのサイズ変更時にdivを調整する

Question

ブラウザのサイズ変更時にブラウザウィンドウに収まるようにページのdivコンテナを調整しようとしています。私はこれに助けが必要です。

私はブートストラップからクラスcol-md-2を使用します。他にもいくつかのクラスがあります。

私が望むのは、divコンテナがウィンドウ全体の位置を維持していることです。あなたはJavaスクリプトを使用する必要があるかもしれませんこれを行うためには

@font-face { 
 
    font-family: Blanch-Condensed; 
 
    src: url(BLANCH_CONDENSED.otf); 
 
} 
 

 
#fully { 
 
    right: 14px; 
 
    position: relative; 
 
    padding-right: 23px; 
 
} 
 

 
#img1 { 
 
    width: 530px; 
 
    height: 339px; 
 
    padding-left: 49px; 
 
} 
 

 
#rsoftbackground { 
 
    background-color: #D2E3CF; 
 
    width: auto; 
 
    height: auto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#content2 { 
 
    background-color: #EBC083; 
 
    width: auto; 
 
    height: auto; 
 
} 
 

 
#menubar { 
 
    background-color: #428cba; 
 
    font-family: "Oswald"; 
 
} 
 

 
#t2 { 
 
    font-family: "Blanch-Condensed"; 
 
    color: #0840B1; 
 
    font-size: 64px; 
 
    left: 195px; 
 
    position: relative; 
 
    background-color: #D2E3CF; 
 
} 
 

 
#t3 { 
 
    font-family: "Blanch-Condensed"; 
 
    color: #0840B1; 
 
    font-size: 22px; 
 
    left: 195px; 
 
    position: relative; 
 
    background-color: #D2E3CF; 
 
} 
 

 
.opcion1 { 
 
    line-height: 35px; 
 
    color: white; 
 
    font-family: "Blanch-Condensed"; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
} 
 

 
.opcion2 { 
 
    line-height: 35px; 
 
    color: white; 
 
    font-family: "Blanch-Condensed"; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
} 
 

 
.opcion3 { 
 
    line-height: 35px; 
 
    color: white; 
 
    font-family: "Blanch-Condensed"; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
} 
 

 
.opcion4 { 
 
    line-height: 35px; 
 
    color: white; 
 
    font-family: "Blanch-Condensed"; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
} 
 

 
.opcion5 { 
 
    line-height: 35px; 
 
    color: white; 
 
    font-family: "Blanch-Condensed"; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
} 
 

 
#interiormenu { 
 
    width: 150px; 
 
    height: 170px; 
 
    background-color: #428cba; 
 
    position: relative; 
 
    top: 0px; 
 
    padding-top: 58px; 
 
    border-color: #737373; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    left: 409px; 
 
} 
 

 
#interiormenu2 { 
 
    width: 150px; 
 
    height: 170px; 
 
    background-color: #428cba; 
 
    position: relative; 
 
    top: 0px; 
 
    padding-top: 58px; 
 
    border-color: #737373; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    left: 409px; 
 
} 
 

 
#interiormenu3 { 
 
    width: 150px; 
 
    height: 170px; 
 
    background-color: #428cba; 
 
    position: relative; 
 
    top: 0px; 
 
    padding-top: 58px; 
 
    border-color: #737373; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    left: 409px; 
 
} 
 

 
#interiormenu4 { 
 
    width: 150px; 
 
    height: 170px; 
 
    background-color: #428cba; 
 
    position: relative; 
 
    top: 0px; 
 
    padding-top: 58px; 
 
    border-color: #737373; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    left: 409px; 
 
} 
 

 
#interiormenu5 { 
 
    width: 150px; 
 
    height: 170px; 
 
    background-color: #428cba; 
 
    position: relative; 
 
    top: 0px; 
 
    padding-top: 58px; 
 
    border-color: #737373; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    left: 409px; 
 
} 
 

 
.BlueClass { 
 
    color: white; 
 
    font-family: "Oswald"; 
 
    font-weight: bold; 
 
    width: 150px; 
 
    height: 170px; 
 
    background-color: #8933B4; 
 
    position: relative; 
 
    top: 0px; 
 
    border-color: #FFFFFF; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    margin-left: -17px; 
 
    margin-top: -60px; 
 
    padding-top: 58px; 
 
}

<div class="continer-fluid"> 
 
    <div class="row" id="fully"> 
 
     <div class="col-md-2" id="rsoftbackground"> 
 
      <h1 id="t2">RSOFT S.A</h1> 
 
      <h2 id="t3"> Construimos tecnologia para el futuro</h2> 
 
     </div> 
 
     <div class="row" id="rsoftbackground"> 
 
      <div class="col-md-2" id="interiormenu"> 
 
       <div class="text-center"> 
 
        <div class="sonido1"> 
 
         <audio src="sonido/switch-flick.wav" preload="auto"></audio> 
 
         <a href="#" class="opcion1">Quienes Somos</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-2" id="interiormenu2"> 
 
       <div class="text-center"> 
 
        <div class="sonido1"> 
 
         <audio src="sonido/switch-flick.wav" preload="auto"></audio> 
 
         <a href="#" class="opcion2">Clientes</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-2" id="interiormenu3"> 
 
       <div class="text-center"> 
 
        <div class="sonido1"> 
 
         <audio src="sonido/switch-flick.wav" preload="auto"></audio> 
 
         <a href="#" class="opcion3">Portafolio</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-2" id="interiormenu4"> 
 
       <div class="text-center"> 
 
        <div class="sonido1"> 
 
         <a href="#" class="opcion4">Servicios</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-2" id="interiormenu5"> 
 
       <div class="text-center"> 
 
        <div class="sonido1"> 
 
         <a href="#" class="opcion5">Intranet</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-12" id="content2"> 
 
      <img src="fotos/shutterstock_189855374 (1).png" width="530" height="339" id="img1"> 
 
     </div> 
 
     <div class="col-md-12" id="content2"> 
 
      <p> CREAMOS LO MEJOR PARA TI</p> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

：

var div = document.getElementsByTagName("div"); 
for (var i in div){ 
div[i].width = window.innerWidth; 
div[i].height = window.innerHeight; 
}