web-dev-qa-db-ja.com

divの高さをその内容で拡大する

私はこれらの入れ子になった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 accomodate 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に対応するように広がっていないということです。

どうすればこれを解決できますか？

cssheight
350
patrick

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

.clear { clear: both; }

更新： この質問はまだかなりの量のトラフィックを受け取るので、私はFlexible boxまたはFlexboxと呼ばれる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 および viewport単位 をサポートしていますが、古いブラウザのサポートを維持する必要がある場合は、必ず特定のブラウザバージョンの互換性を確認してください。

259
jennyfofenny

これを試してください：overflow: auto;

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

211
sipőcz péter

以下を追加してください。

overflow:hidden;
height:1%;

あなたの主divに。明確にするための余分な<br />の必要性を排除します。

80
Nick

別の方法として、これを試してみることもできます。

display:table;

jsFiddle

56
h0mayun

私はただ使うだろう

height: auto;

あなたのdivに。はい、私はもう少し遅れていることを知っていますが、それがここにあったならそれが私を助けてくれたような誰かに役立つかもしれないと考えました。

22
Charles

以下が動作するはずです。

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some Explorer browsers to trigger hasLayout
}
14
Steerpike

display:inline-block cssが付加されたspanタグを使用してください。 CSSを使用してdivのようにさまざまな方法で操作することができますが、widthまたはheightを含めないと、その内容に基づいて展開および縮小されます。

それが役立つことを願っています。

8
dark marc

この問題は、親部門の子要素が浮いているときに発生します。これが問題の 最新の解決策 です。

あなたのCSSファイルに .clearfix と呼ばれる次のクラスを疑似セレクタ ：after と共に書いてください。

.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のブログ

6
Ifti Mahmud

通常、これは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
David Thomas

#main_content divにfloatプロパティを追加

5
Ray

何でもする前にCSSルールをチェックしてください：

{ position:absolute }

存在する場合は削除し、それらを必要としません。

4
onalbi

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

  1. clear:both;プロパティを使用して浮動エレメントの下に別のエレメントを挿入するか、浮動エレメントのclear:both;で:afterを使用します。

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

4
Apoorv Srivastava

この作品のように見えます

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

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

3
SyntheticMeshwork

あなたは伝統的な方法を試しましたか？メインコンテナの高さを指定する：auto

#container{height:auto}

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

2
Michelle Dimwaite

画面の高さを100％に設定したsectionタグを使用して、プロジェクトにBootstrapを追加しました。プロジェクトをレスポンシブにするまではうまくいきました。その時点で私は jennyfofenny の回答 の一部を借用しました。 。

私の新しいsection CSSは次のようになります。

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
Adrian

CSSの場合：#clear_div{clear:both;}

内側のdivのdivタグの後にこの新しい後続のdivを追加します

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_class_clear.asp ：詳細については

2
ingrid

とても簡単な方法

親DIV上：

height: 100%;

この仕事は毎回私のために

2
Daniel Beltrami

私は自分自身でプロジェクトの中でこれに遭遇しています - 私はdivの底からこぼれていたdivの中のテーブルを持っていました。私が試した高さ修正のどれもうまくいきませんでした、しかし私はそれのための奇妙な修正を見つけました、そしてそれはそれのちょうどピリオドでdivの一番下にパラグラフを置くことです。次に、テキストの「色」をコンテナの背景と同じになるようにスタイル設定します。あなたが喜ばせるようにきちんと動いたし、JavaScriptは必要ありません。改行しないスペースは機能しません - 透明な画像も機能しません。

明らかにそれを含むために伸張するためにテーブルの下にいくつかのコンテンツがあることを確認する必要がありました。これは他の人にもうまくいくのだろうか。

これはデザイナーがテーブルベースのレイアウトに頼るようなことです - 私がこのものを考え出してそしてそれをクロスブラウザ互換性があるようにすることに費やした時間は私を狂わせます。

1
Nancy Hastings-Trew

私はこれを試してみました

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>
1
Ahmed Aboelela

CSS Grid Layout を使用できます。現時点ではサポートはかなり広いです。 caniuse で確認してください。

これがjsfiddleの example です。また example たくさんのテキストがあります。

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
Sharikov Vladislav

あなたがjQuery UIを使っているのなら、彼らはすでに機能するクラスを持っていて、divの内側の一番下に<div>で展開したいheight:auto;を追加し、次にクラス名ui-helper-clearfixを追加する以下のように：

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

拡張したいdivではなく、明確なdivにjQuery UIクラスを追加します。

0
Lucas M. Oliveira

私はこれが古いスレッドの一種であることを知っています、しかし、これはmin-height CSSプロパティできれいな方法で達成することができます、それで私は将来の参照のためにこれをここに残します：

ここでOPが投稿したコードに基づいてフィドルを作りました： http://jsfiddle.net/U5x4T/1/ 、内側にdivを追加して追加すると、コンテナのサイズが拡大または縮小する様子がわかります。

これを達成するために必要な2つのことは、OPコードに追加されるものです。

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

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

0
Juan Carlos Alpizar Chinchilla

表示が追加されました：divにインラインで表示され、高さの内容が設定されたdivの高さ200pxより大きくなったときに（スクロールではなく）autoになりました。

0
Jelle