0

だから私はこの投稿を見てきました: CSSを使用してdivの高さを幅に比例してスケーリングできますか? そして、それは私の質問に答えます。必要に応じて、div を比例的にスクラーにすることができます。ただし、これらの div の最小の高さを設定することも必要です。

このフィドルhttp://jsfiddle.net/FBZuB/1/で、達成しようとしていることを設定しました。BLUE div は、BLUE div の幅に基づいて RED div の高さを定義する一般的なラッパーです。ただし、RED div の min-height を変更しようとすると、スケールしたい div に min-height があり、予期しない結果が発生します。

最小高さのポイントまで縮小すると、div はスケーリングを停止し、幅のみが変化すると思います。ただし、最小高さを設定すると、計算全体のある種の基点が設定され、すべてが継続的にスケーリングされるようです。これが理にかなっていることを願っています。

RED div は拡大縮小する必要がありますが、特定の時点で RED div が最小の高さに達すると、高さのスケーリングを停止し、幅のみのスケーリングを停止する必要があります。以前に純粋な JavaScript を使用してこれを達成しましたが、上記の投稿を読んだので、CSS のみのソリューションを取得しようとしています。

これがコードです。今のところ内容は無視して構いません... 私は主に赤いブロックに焦点を当てています。min-height に達するまで、幅/高さを比例的にスケーリングします。その後、高さのスケーリングを停止し、幅のみをスケーリングする必要があります。

HTML

<div style="background: blue; width: 70%;">
<div id="left">
    <div class="content"></div>
</div>
<div id="right">
</div>
</div>

CSS

div {
    margin: 5%;
    float: left;
    background: red;
    position: relative;
}
#left {
    width: 50%;
    padding-bottom: 60%;
    min-height: 100px;
}
#right {
    width: 30%;
    padding-bottom: 60%;
    min-height: 100px;
}
.content {
    position: absolute;
    width: 90%;
    margin: 5%;
    background: green;
    top: 0;
    left: 0;
    height: 90%;
}
4

1 に答える 1

-1

残念ながら、プレーンな CSS はIE を除くすべてのブラウザーで式を計算することはできません。そのため、少なくとも JavaScript を使用して幅を動的に計算する必要があります。
私はおそらくあなたのhtmlファイルでこのようなことをするでしょう。divのサイズを変更する方法
を 指定しなかったので、ウィンドウのサイズが変更されたときだけだと思います。

<body onresize="
    var left = document.getElementById('left');
    if (left.clientHeight < left.style.min-height) {
        left.style.cheight = left.style.min-height;
    }
">
</body>
于 2013-03-07T23:21:49.483 に答える