html - この一連の Div を幅と高さで伸縮可能な div にする方法

Question

私は 5 月のページにこの div のセットを持っていますが、ブラウザ ウィンドウのサイズ変更で全体のサイズを変更することはできません。このサイトで見つかった Jquery コーディングを使用しようとしましたが、Div は幅のサイズのみを変更しているようです。 wとHの両方ではなく。

divの私のイメージはこのリンクにあります:

www.beemagic.co.uk/mydiv.html

Answer 1

サイト全体のサイズを変更できるようにしたいのですが、どうすればよいかよくわかりません。

私はこの非常に基本的な JSFiddle を考え出しました。これは、それが本当に必要な場合に実行できることを示しています。

HTML:

<div class="wrap">
    <div class="header"></div>
    <div class="content">
        <div class="side"></div>
        <div class="slider"></div>
    </div>
</div>

CSS:

.wrap {
    height: 1000px;
    width: 100%;
    border: green 2px solid;
}
.header {
    height: 19%;
    width: 99.6%;
    border: blue 2px solid;
    margin: 5px;
}
.content {
    height: 79%;
    width: 99.6%;
    border: red 2px solid;
    margin: 5px;
}
.side {
    height: 85%;
    width: 20%;
    border: purple 2px solid;
    margin: 5px;
}
.slider {
    height: 10%;
    width: 99%;
    border: gold 2px solid;
    margin: 5px;
}

デモはこちら