122

ボディの 50% の幅を持つ div があるとします。その高さをその値に等しくするにはどうすればよいですか? そのため、ブラウザー ウィンドウの幅が 1000 ピクセルの場合、div の高さと幅は両方とも 500 ピクセルになります。

4

4 に答える 4

149

これは実際には CSS だけで行うことができますが、div 内のコンテンツは絶対に配置する必要があります。重要なのは、パディングをパーセンテージとして使用し、box-sizing: border-boxCSS 属性を使用することです。

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があります

于 2012-10-17T00:13:55.493 に答える
32

これは 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>

于 2012-04-08T12:41:10.530 に答える
14 
<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;
}

とにかく、それが私がそれを機能させる方法でした。パディングだけでは正方形にならないからです。

于 2013-08-13T08:39:42.140 に答える
10

これに対して、ビューポートの幅によってサイズが調整される 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 の記事で、このアプローチやその他のアプローチについて書いたので、ぜひチェックしてください。

于 2014-11-05T14:23:32.423 に答える