1

これが私のHTMLスニペットです。

<div class=bigger>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

次のような CSS がある場合:

.bigger
{
  height: 300px;
}

すべての子 div の高さを親と同じにする、つまりすべての高さを 300px にする CSS の方法はありますか?

4

6 に答える 6

3

Flexbox を使用したソリューション:

.bigger {
  height: 400px;
  background: #eea;

  display: flex;
  flex-direction: column;
}

.bigger div {
  margin: 4px;
  border: 1px dotted green;
  flex: auto;   
}

デモ: http://codepen.io/anon/pen/nAjLt (Codepen はベンダー プレフィックスを行うことに注意してください)

于 2013-10-28T11:19:34.647 に答える
3

純粋にCSSでこれを実現したい場合は、これを試すことができます

デモ

4項目に設定しました。必要な数のアイテムに拡張できます。

/* one item */
.bigger > div:first-child:nth-last-child(1) {
    height: 300px;
}

/* two items */
.bigger > div:first-child:nth-last-child(2),
.bigger > div:first-child:nth-last-child(2) ~ div {
    height: 150px;
}

/* three items */
.bigger > div:first-child:nth-last-child(3),
.bigger > div:first-child:nth-last-child(3) ~ div {
    height: 100px;
}

/* four items */
.bigger > div:first-child:nth-last-child(4),
.bigger > div:first-child:nth-last-child(4) ~ div {
    height: 75px;
}
于 2013-10-28T11:18:08.790 に答える
1 
.bigger
{
  height: auto;
}
.bigger div
{ 
height:50px;
}

各内部divの高さについて言及する必要があり、それのみが適切に機能します。

ここで、高さが同じである大きな div 内に別の内部 div 要素を追加します。

ここで高さ 50px について言及しましたが、必要な高さを指定してください。

于 2013-10-28T11:32:28.630 に答える
1

要素が同じ量のスペースを占有できるようにすることは、伝統的に<table>s を使用した場合にのみ可能でした。ただし、CSS を使用して、代わりに を<div>のように動作<table>させることができます。

HTML

<div class=bigger>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <!-- add or remove any number of <div>s here -->
</div>

(関連) CSS

.bigger {
    display: table;
    height: 300px;
    width: 100%;
}

.bigger > div {
    display: table-row;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
于 2013-10-28T11:17:07.117 に答える
1

auto子供と親と一緒に作業するには、とを使用する必要があります。max

<div class="bigger">
 <div>A</div>
 <div>B</div>
 <div>C</div>
</div>

ここで使用できます

.bigger {
  height: auto; // this will do the trick..
  overflow: none;
  min-height: 300px;
}

height子が増加または減少するたびに同じままであることを確認するためだけに、最大値と最小値を使用してから、これを使用します。

.bigger div {
  height: 100%; // note this..
}

ここでこのフィドルを試してみてください: http://jsfiddle.net/afzaal_ahmad_zeeshan/2bJfW/ div をさらに追加して確認してください。

div の高さを動的に作成する場合、CSS はありません。JS が必要になるか、そのために jQuery を使用できます。子の数を数えてから、高さのパーセンテージを変更する必要があるため、テキストがそのサイズに収まらないため、から (3 の場合) または (4) の100場合30などとしましょう。22

于 2013-10-28T11:17:37.333 に答える
1 
.bigger {
    width:100%;
    height:auto;
    border:1px solid red;
}
.bigger div {
    height:100px;
    width:100%;
    border:1px solid blue;
}

あなたの目的のために、このcssを使用して、に設定heightしてくださいauto it will adjust to any no of divs。

また .bigger div、すべての div を 100px の高さに設定します。

ライブデモ

EDIT：固定コンテナ用

.bigger {
    width:100%;
    height:300px;
    border:1px solid red;
    display:table;
}
.bigger div {
    display:table-row;
    height:auto;
    width:100%;
}

ライブデモ2

また、すべてのブラウザで同じになります:)

于 2013-10-28T11:15:26.950 に答える