ボディの 50% の幅を持つ div があるとします。その高さをその値に等しくするにはどうすればよいですか? そのため、ブラウザー ウィンドウの幅が 1000 ピクセルの場合、div の高さと幅は両方とも 500 ピクセルになります。
4 に答える
これは実際には CSS だけで行うことができますが、div 内のコンテンツは絶対に配置する必要があります。重要なのは、パディングをパーセンテージとして使用し、box-sizing: border-box
CSS 属性を使用することです。
div {
border: 1px solid red;
width: 40%;
padding: 40%;
box-sizing: border-box;
position: relative;
}
p {
position: absolute;
top: 0;
left: 0;
}
<div>
<p>Some unnecessary content.</p>
</div>
パーセンテージはお好みで調整してください。ここにJSFiddleがあります
これは CSS ハック (他の回答を参照) で実行できますが、JavaScript でも非常に簡単に実行できます。
div の幅を (たとえば) 50% に設定し、JavaScript を使用して幅を確認し、それに応じて高さを設定します。jQuery を使用したコード例を次に示します。
$(function() {
var div = $('#dynamicheight');
var width = div.width();
div.css('height', width);
});
#dynamicheight
{
width: 50%;
/* Just for looks: */
background-color: cornflowerblue;
margin: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dynamicheight"></div>
ブラウザー ウィンドウのサイズ変更に合わせてボックスをスケーリングする場合は、コードを関数に移動し、ウィンドウのサイズ変更イベントで呼び出します。こちらもそのデモンストレーションです(フルスクリーンの例を表示し、ブラウザウィンドウのサイズを変更してください):
$(window).ready(updateHeight);
$(window).resize(updateHeight);
function updateHeight()
{
var div = $('#dynamicheight');
var width = div.width();
div.css('height', width);
}
#dynamicheight
{
width: 50%;
/* Just for looks: */
background-color: cornflowerblue;
margin: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dynamicheight"></div>
<div><p>some unnecessary content</p></div>
div{
border: 1px solid red;
width: 40%;
padding: 40%;
box-sizing: border-box;
position: relative;
}
p{
position: absolute;
top: 0;
left: 0;
}
これが機能するには、パディングを ex に定義する必要があると思います。上?このような:
<div><p>some unnecessary content</p></div>
div{
border: 1px solid red;
width: 40%;
padding-top: 40%;
box-sizing: border-box;
position: relative;
}
p{
position: absolute;
top: 0;
left: 0;
}
とにかく、それが私がそれを機能させる方法でした。パディングだけでは正方形にならないからです。
これに対して、ビューポートの幅によってサイズが調整される CSS アプローチを作成しましたが、ビューポートの高さの 100% で最大になります。必要ありませんbox-sizing:border-box
。疑似要素を使用できない場合は、疑似コードの CSS を子に適用できます。デモ
.container {
position: relative;
max-width:100vh;
max-height:100%;
margin:0 auto;
overflow: hidden;
}
.container:before {
content: "";
display: block;
margin-top: 100%;
}
.child {
position: absolute;
top: 0;
left: 0;
}
レスポンシブ アニメーションのスケーリングに関する CSS-Tricks の記事で、このアプローチやその他のアプローチについて書いたので、ぜひチェックしてください。