BinaryDevelop
  1. ホーム
  2. html

[解決済み] div の高さをコンテンツに合わせて拡張する

2022-03-22 12:49:58

質問

私はこれらの入れ子になった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がすべて収容され、その結果、背景に対して進み続けてしまいます。

上記のシナリオを考慮した上で、この問題を解決するにはどうしたらよいでしょうか。

どのように解決するのですか？

を強制する必要があります。 clear:both の前に #main_content を閉じます。私ならおそらく <br class="clear" />; を #main_content というCSSを設定します。 

.clear { clear: both; }

更新しました。 この質問は今でもかなりのトラフィックを受けるので、回答を更新して CSS3の新しいレイアウトモード、フレキシブルボックス（Flexbox）。 : 

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>

現在、ほとんどのモダンブラウザは フレックスボックス と ビューポートユニット しかし、古いブラウザへのサポートを維持する必要がある場合は、特定のブラウザのバージョンの互換性を確認するようにしてください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します