浏览器调整大小时调整div

Question

我正在尝试在浏览器调整大小时调整页面上的div容器以适应浏览器窗口。我需要帮助。

我使用bootstrap中的类col-md-2。还有其他几个类正在使用中。

我想要的是div容器保持整个窗口内的位置。

@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

为了做到这一点，您可能需要使用Java Script：

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