0

次のようなコードがあります。

<body>
<div class="parent">
<div class="children">
Some content here
</div>
</div>
</body>

そしてこのCSS：

body {width:100%;height:100%}
.parent{background-color: grey;}
.children{width: 90%; text-align: justify;}

childrenの高さを の幅に等しくしたいparent。残念ながら、理由はわかりません。インターネットで調べてみたり、 のようなさまざまな解決策を試したりしましchildren{width: 90%; text-align: justify;height: 100%;}たが、うまくいきません。この 2 番目の div の代わりにテーブルを使用できることはわかっていますが、この Web サイトは小さいデバイスでは応答しません。これは私にとって非常に重要です。助言がありますか？

4

2 に答える 2

0

CSS 3 では、ビューポート ユニットを使用してこれを行うことができます (各 vw はビューポートの幅の 1% です)。

#parent {
    position: relative;
    background: #aaa;
    margin: 10px;
    width: 50%;
}

#child1 {
    height: 100px;
    background: #333;
    width: 100px;
    margin: 10px;
}
#child2 {

    height: 50vw;
    width: 100%;
    background: #f00;
}
}
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

問題は、親がビューポートの何パーセントであるかを知る必要があることですが、デザインをレスポンシブにしようとしている場合、これはそれほど問題にはなりません。

于 2015-02-27T18:13:06.087 に答える
0

単純な CSS では、別の要素のプロパティ値を参照する方法はありません。子を親の幅の高さにするには、javascript を使用する必要があります。

ページのレンダリングが完了したら、javascript を使用して親 div の幅を取得し、その値を使用して子の高さを設定する必要があります。

于 2015-02-27T18:17:11.553 に答える