divの高さをそのコンテンツに合わせて拡張します

376

これらのネストされたdivがあり、内部のDIVに対応するためにメインコンテナーを（高さで）展開する必要があります

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

    <div id="footer">
    </div>
  </body>
</html>

CSSはこれです：

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
}

私が抱えている問題は、#main_contentすべての内側のdivに対応できるように伸びていないため、背景に向かっているということです。

上記のシナリオを考慮してこの問題を解決するにはどうすればよいですか？

css  height 
— パトリック
ソース
5
みんな、答えてくれてありがとう！私の特定のケースの最良の解決策は、BRをハードコードして両側をクリアすることでした（JennyfofennyとRicebowlに感謝）とにかく、他の解決策も機能しました。overflow：autoを入れても問題ありませんでした。そのdivの幅を子divのサイズに減らしました）。今私は不思議に思っています：これらのソリューションには欠点がありますか、それとも無関心に使用できますか？（例：そのうちの1つがIE6などで動作しない可能性があります...）
— patrick
1
@Patrick、質問をさらに発展させたい場合は、「編集」リンク（質問の現在のテキストの下）をクリックして、さらに質問を追加します。慣例では<strong>Edited</strong>$Reason_for_revising_question...、焦点に大きな変更または追加がある場合、変更を反映するために質問のタイトルを変更する必要がある場合があります。=）
— デビッドはモニカを
4
また、でdivタグを閉じたことはありませんid='container'。それはいくつかの問題を引き起こす可能性があります。
— Batkins
@patrick、.clearクラスのCSSもありません。忘れましたか、それとも元のコードにありますか？.clearその上のクラスはbr@jennyfofennyが自分の答えに言及として非常に重要です。
— Cannicide 2017

回答:

281

divを閉じるclear:both前にaを強制する必要があり#main_contentます。おそらくをdivに移動し<br class="clear" />;て#main_content、CSSを次のように設定します。

.clear { clear: both; }

更新：この質問は依然としてかなりの量のトラフィックを取得しているため、CSS3のフレキシブルボックスまたはフレックスボックスと呼ばれる新しいレイアウトモードを使用する最新の代替手段で回答を更新したいと思います。

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}
<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>
スニペットを展開

最近のほとんどのブラウザは現在Flexboxとビューポートユニットをサポートしていますが、古いブラウザのサポートを維持する必要がある場合は、特定のブラウザバージョンの互換性を確認してください。

— ジェニーフェフェニー
ソース
4
ここで「CSSプロパティ明らかにW3Schoolsの記事でね。基本的に、クリアとは、クリアが適用される要素がフロー内のフロートの下（左のみ、右のみ、または両方）から始まることを意味します。
— jennyfofenny 2012年
230

これを試して： overflow: auto;

それは私の問題のために働いた。

— sip pczpéter
ソース
10
+1、このソリューションはエレガントで、ページに非表示のタグを追加しません。このフィドルを参照してください：jsfiddle.net/XmKrm/1
— Nabil Kadimi
5
オーバーフロー自動車は私の​​ためにうまくいきました。参考までに、オーバーフロー自動コンテナの高さが内部のコンテンツよりも低い場合は、スクロールバーが追加されます。サイズを大きくするか、高さを設定します：オーバーフローとともに自動。
— ブライアンマイヤーズ
@ Roozbeh15 add display: block;it
— BadAtPHP
2
最善かつ最も簡単な解決策...あなたは私の日を救いました。ありがとう
— Kashyap Kotak
神聖な小屋これは素晴らしく機能しました。なぜこれが機能したのか、その根底にあるメカニズムを説明したいと思いますか？
— Merkurial
86

以下を追加します。

overflow:hidden;
height:1%;

あなたのメインdivに。<br />クリアのための追加の必要性を排除します。

— ニック
ソース
うわー！それは私が期待していたものとは正反対のことをしました！オーバーフロー：非表示=コンテンツに合わせて展開します！私はそれを推測したことはなかったでしょう！
— ハウゼン2013年
はい、これは私にとってもうまくいきました、そしてそれはなぜ完全に意味がありません。「高さ1％」と「オーバーフロー非表示」が機能する理由は何ですか？
— acarlon 2013年
1
高さを設定していない場合、オーバーフローの非表示がすべてを非表示にするだけでなく（cosの高さが0である）、それ自体が拡大する理由は何ですか？
— Max Yari
1
overflow：hiddenはスクロールバーを非表示にしますが、ブロックのサイズは保持します
— authentictech
「overflow：hidden」だけで機能しましたが、「overflow：auto」も機能し、スクロールバーが表示されませんでした。
— Whirlwind991 2017年
60

別の方法として、これを試すこともできますが、状況によっては役立つ場合があります 

display:table;

jsFiddle

— h0mayun
ソース
24

私はただ使う

height: auto;

あなたのdivで。はい、私は少し遅れていることを知っていますが、これがここにあれば私を助けてくれるだろうような誰かを助けるかもしれないと考えました。

— チャールズ
ソース
height: auto;以下のすべてのアイテムを一番上に移動します。メインコンテンツのdivにこのプロパティを設定すると、ページのフッターが上に移動し、ヘッダーに接触してコンテンツのdivと重なります。
— アーロンフランケ
1
これが私の解決策でした。ありがとう！
— Nik Hammer-Ellis
14

以下が機能するはずです：

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}
— ステアパイク
ソース
オーバーフローの追加：自動で動作しますが、幅：100％を追加すると、div（#main_content）が親のdivよりも少し大きくなります。理由がわかりませんでした！
— パトリック
2
これは、指定された幅に加えてパディングがカウントされるため、要素の幅は100％+ 5px左パディング+ 5px右パディング
— NickV
1
オーバーフロー：自動; 私のために働いた、ヴェディありがとうございました。
— Cosco Tech 2015
8

display:inline-blockCSSが添付されたスパンタグを使用します。その後、CSSを使用して、多くの方法でdivのようですが、あなたが含まれていない場合は、それを操作することができwidthたりheight、その内容に基づいて展開して後退。

お役に立てば幸いです。

— ダークマーク
ソース
あなたの望みはうまくいきました：それは少なくとも私を助けました！:)ところで、私は自分の要素をdiv（の代わりにspan）のdisplay: inline-blockままにしましたが、私の場合（クロム）でも機能しました。
— snapfractalpop
6

通常、これはclear:bothの最後の子要素にルールを適用することで解決できると思います#items_list。

次のいずれかを使用できます。

#items_list:last-child {clear: both;}

または、動的言語を使用している場合は、リスト自体を作成するループで生成された最後の要素に追加のクラスを追加して、HTMLに次のようなものを追加します。

<div id="list_item_20" class="last_list_item">

とCSS

.last_list_item {clear: both; }
— デビッドはモニカを復活させると言います
ソース
6

この問題は、親Divの子要素がフローティングしている場合に発生します。ここで最新のソリューション問題のは：

CSSファイルに、疑似セレクターとともに.clearfixという次のクラスを記述します。 

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

次に、HTMLで.clearfixクラスを親Div に追加します。例えば：

<div class="clearfix">
    <div></div>
    <div></div>
</div>

それは常に動作するはずです。コードをよりセマンティックにするため、クラス名を.clearfixではなく.groupとして呼び出すことができます。二重引用符 ""の間のContentの値にドットまたはスペースを追加する必要がないことに注意してください。また、overflow：auto; 問題を解決できる可能性がありますが、スクロールバーの表示などの他の問題が発生するため、お勧めできません。

出典：Lisa CatalanoとChris Coyierのブログ

— イフティマフムド
ソース
5

floatプロパティを#main_contentdivに追加します- フロートされたコンテンツを含むように展開されます

— レイ
ソース
レイのおかげで、divはコンテンツのサイズ（#items_list）に縮小されましたが、幅は400pxでした。#main_contentを全幅に保つことができれば、あなたのソリューションは本当に良いでしょう-何か提案はありますか？
— パトリック
@Ray 2とそれから数年後、これは私に同様の問題の潜在的な頭痛を救いました。ありがとうございました！
— John H
4

何かを行う前に、次のコマンドでcssルールを確認してください。

{ position:absolute }

存在する場合は削除し、不要な場合は削除してください。

— オナルビ
ソース
2
「絶対配置要素はフローから削除されるため、他の要素によって無視されます。したがって、絶対配置要素に従って親の高さを設定することはできません。」stackoverflow.com/questions/12070759/…–
— フェデリコ
4

名前が示すように、フローティングエレメントは親エレメントの内側のスペースを占有しません。したがって、子要素がフローティングされている要素に高さが明示的に指定されていない場合、親要素は縮小されたように見え、指定されoverflow:hidden;た子が画面に表示されない場合も、子要素の寸法を受け入れないように見えます。この問題に対処するには、いくつかの方法があります。

  1. clear:both;プロパティを使用clear:both;してフロート要素の下に別の要素を挿入するか、フロート要素を使用し:afterます。

  2. display:inline-block;またはのflex-box代わりにを使用してくださいfloat。

— Apoorv Srivastava
ソース
3

これはうまくいくようです

html {
 width:100%;
 height:auto;
 min-height:100%
}

画面サイズを最小限にとどめ、コンテンツが拡大すると拡大します。

— サブスタンスMX
ソース
2

section画面の高さの100％に設定したタグを含むプロジェクトにBootstrapを追加しました。プロジェクトをレスポンシブにするまでうまくいきました。その時点でjennyfofennyの回答の一部を借りたので、小さい画面で画面サイズが変わったときにセクションの背景がコンテンツの背景と一致しました。

新しいsectionCSSは次のようになります。

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

特定の色のセクションがあるとします。を使用するとmin-height、画面が小さいためにセクションの幅が縮小した場合、セクションの高さが拡大し、コンテンツはセクション内にとどまり、背景は目的の色のままになります。

— エイドリアン
ソース
2

従来の方法を試しましたか？メインコンテナーの高さを与える：auto

#container{height:auto}

私はこれを使用しましたが、ほとんどの場合、うまくいきました。

— ミシェル・ディムウェイト
ソース
1

私自身、プロジェクトでこれに遭遇しています-divの底から溢れ出るdiv内のテーブルがありました。私が試した高さの修正はどれも機能しませんでしたが、奇妙な修正が見つかりました。それは、ピリオドだけを含む段落をdivの下部に配置することです。次に、テキストの「色」をコンテナの背景と同じスタイルにします。好きなようにきちんと動作し、JavaScriptは不要です。改行しないスペースは機能しません-透明なイメージも機能しません。

どうやら、それを含むように拡大するために、テーブルの下にいくつかのコンテンツがあることを確認する必要があるだけです。これは誰にとってもうまくいくのだろうか。

これは、デザイナーがテーブルベースのレイアウトに頼るようなものです-私がこのことを理解し、ブラウザー間の互換性を確保するのに費やした時間が、私を夢中にさせています。

— ナンシー・ヘイスティングス・トゥルー
ソース
これをCSSで行うには何らかの方法が必要ですが、それがどうなるのか私にはわかりません。これでうまくいきましたが、width：100％を追加する必要がありました。高さ：自動; min-height：100％; 位置：相対;
— RationalRabbit
0

あなたはjQueryのUIを使用している場合、彼らはすでに作品がちょうど魅力を追加クラスを持っている<div>あなたが拡大したいということdivの内側の下部にあるheight:auto; クラス名UIヘルパー-clearfixを追加したり、このスタイル属性を使用し、すぐ下のように追加し：

<div style=" clear:both; overflow:hidden; height:1%; "></div>

展開するdivではなく、明確なdivにjQuery UIクラスを追加します。

— ルーカス・M・オリベイラ
ソース
0

私はこれが古いスレッドの一種であることを知っていますが、これはmin-heightCSSプロパティを使用してクリーンな方法で実現できるため、今後の参照のためにここに残しておきます。

ここにOP投稿されたコードに基づいてフィドルを作成しました：http : //jsfiddle.net/U5x4T/1/、内部のdivを削除して追加すると、コンテナーがどのように拡大または縮小するかに気付くでしょう

OPコードに加えて、これを実現するために必要なのは次の2つだけです。

*メインコンテナーでのオーバーフロー（フローティングdivに必要）

* min-height cssプロパティ、詳細はこちら：http : //www.w3schools.com/cssref/pr_dim_min-height.asp

— ファンカルロスアルピサルチンチラ
ソース
0

divにdisplay：inlineが追加され、高さのコンテンツが設定されたdivの高さである200pxより大きくなったときに、スクロール要素ではなく自動で成長しました。

— ジェレ
ソース
1
これは質問に対する明確な答えではありません。備考はコメント機能をご利用ください。
— ksbg
0

CSSグリッドレイアウトを使用できます。現在のところ、サポートはかなり広範です：caniuseで確認してください。

これがjsfiddle の例です。たくさんのテキストの例も。

HTMLコード：

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

CSSコード： 

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff
— シャリコフ・ウラディスラフ
ソース
0

上記のほとんどすべての提案を試しましたが、どれもうまくいきませんでした。しかし、「display：table」が私にとってはトリックでした。

— ポンゴッド
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.