3

div 内に 2 つの div を含む html をコーディングしようとしています。幅または高さのない親 div があります。幅はブラウザの幅で、高さは指定されていません。この親 div 内に 2 つの div が必要です。最初の div には幅または 250px が必要で、2 番目には残りの画面幅が必要です。どちらも高さがありません..その中にどれだけのコンテンツがあるかによって異なります。今、私はこのようにしようとしていました：

<div id="calendar">
        <section id="list">
        </section>

        <section id="grid">
        </section>
</div>

css は次のようになります。

#calendar {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
#calendar #list {
    background: #f00;
    position: absolute;
    width: 250px;
    left: 0;
    top: 0;
}
#calendar #grid {
    background: #0f0;
    position: absolute;
    left: 250px;
    top: 0;
    right: 0;
}

問題は、コンテンツを子 div に追加しても親 div のサイズが変更されないことです。

この原因を解決するための CSS の回避策があることを願っています。これは JS 経由ではうまくいきません。

よろしくお願いします、ダニエル！

4

3 に答える 3

1

これが私の解決策です - > http://tinkerbin.com/Z8mJmItU

指定された幅で #list をフロートし、#grid に同じ margin-left を指定します。

次に、両方の列を親コンテナーの高さの 100% のように見せるには、画像が必要です。「実際の画像」を使用する必要がある前に。今日では、背景に css3 グラデーションを使用するだけで、ページの読み込みを高速化できます (画像の http リクエストが 1 回少なくなります)。もっと複雑に見えるかもしれませんが、実際にはそれほど複雑ではありません。新しい画像を作成しなくても列の幅と色を変更できるため、最終的にはより柔軟になります。必要なのはcssを変更することだけです。

于 2012-06-28T12:01:06.800 に答える
0

ポジショニングを使用せず、フロートを使用してください...現在のメソッドでは親が折りたたまれ、親の必要な高さを決定する唯一の方法は、最上位の子要素の高さを計算することです (通常、JavaScript を使用)。

<div id="calendar">
        <section id="list">
        </section>

        <section id="grid">
        </section>
        <div class="clear"></div>
</div>

...そしてCSS ...

#calendar {
    margin: 0 auto;
    position: relative;
}
#calendar #list {
    background: #f00;
    float:left;
    width: 250px;
}
#calendar #grid {
    background: #0f0;
    margin-left: 250px;
}
.clear{
    clear:both;
}

このようにして、#calendar の高さが最も高い子要素に合わせて調整されます。また、オーバーフロー ルールを削除することを忘れないでください。

... 簡潔にするために上記を説明しましたが、(#calendar にクラスを追加することによって) clearfix を使用することを検討する必要があります。詳細については、こちらを参照してください。

于 2012-06-28T11:46:16.590 に答える
0

絶対を使用する場合は、高さを指定する必要があります。その後、動作するはずです。

編集

使用する

position: relative;

子要素について。

編集2

おそらく、この投稿はあなたが求めているものに役立つでしょうか? div 幅 100% から固定ピクセル数を引いた値

于 2012-06-28T11:23:19.557 に答える