web-dev-qa-db-ja.com

フロートされたコンテンツを考慮して、100％の高さで親コンテナーを拡張する

クライアントプロジェクトで苦労しています。すべてのdivsには絶対位置がありません、height:100% for html、body、およびコンテナーdivsの場合、静的コンテンツはそのコンテンツが不足します（910px）。

オーバーフロープロパティをautoに変更すると、背景はコンテンツの最後まで続きますが、スクロールバーが追加され、静的コンテンツの下枠divが残ります。同じ場所（910px）。

更新：開発リンクが無効になったため、削除しました。 Animusonの完全な説明がこのスレッドの重要な部分であると言うだけで十分であり、コンテナがコンテンツに一致するように拡張されない問題を解決しました。 –タイ

csscss-float
21
Ty Morton

クリアに間違ったoverflow-yプロパティを使用したため、通常の高さではなくmin-heightを設定する必要があります。これを試して：

#static-content {
    background-color: #FFFFFF;
    margin: 0 auto;
    min-height: 100%; /* Set to minimum height so overflow doesn't get hidden */
    overflow-y: hidden; /* HIDE overflow; I know, it doesn't make much sense */
    position: relative;
    width: 960px;
}

フローティングコンテンツ自体

20pxのパディング（可視性のため）があるこの緑色のボックスを考えると、左に浮いた単一の赤いボックスが親ボックスの境界を越えて拡張することに注意してください。これは、フローティングコンテンツが実際には視覚領域の「スペース」を占有しないためです。他のすべての要素はその下に展開され、textのみがその周りをラップします。

Example 1

親のフローティングコンテンツをクリアする

これに対抗して、緑色のボックスがその子の赤いボックスの領域を完全に囲むようにするために、overflow: hiddenをそのスタイルに追加できます。これにより、ボックスが十分に下に拡張されます。

Example 2

親を100％の高さに拡大する

height: 100%を追加するだけで、必要な場所まで拡大することができます。ただし、heightプロパティは絶対的な高さを指定します。フローティングされるコンテンツは実際には垂直方向のスペースを占有しないため、overflow: hiddenプロパティは、親の高さを超えるすべてのコンテンツを切り取ります。

Example 3

代わりに最小の高さを使用する

これを少なくとも 100％の高さに拡張したいので、min-heightプロパティを使用してそこに強制し、親の緑色のボックスを作成するために必要な「自動」の高さを維持できます。子の赤いボックスを完全に囲み、必要な場合にのみ100％を超えてプッシュできるようにします。

Example 4

セットアップ方法

デフォルトでは、すべての要素がoverflow: visibleに設定されているため、プロパティは実際には何も変更しません。これと最初に提供した例の唯一の違いは、要素にheight: 100%が設定されていることです。したがって、親は100％の高さに拡大していましたが、子の赤いボックスの高さ全体をまだカバーしていませんでした。

Example 5

87
animuson

何らかの理由でoverflow：visibleを使用する必要がある場合は、コンテナにすべてのフロートされたコンテンツが含まれるように強制的にストレッチする別の方法があります。最後のコンテナの要素として、clear：bothの要素を配置する必要があります。古代のIE（<8）を無視する場合は、非常に単純なcssでそれを行うことができます（-- https://css-tricks.com/snippets/css/clear-fix/ ）：

.your-container:after {
  content: "";
  display: table;
  clear: both;
}
3
Łukasƨ Fronczyk

高さ：100％が適切に機能しない場合は、CSS3から次の計算関数を試すことができます。

/* Firefox */
height: -moz-calc(100%);
/* WebKit */
height: -webkit-calc(100%);
/* Standard */
height: calc(100%);

すでに述べたように、これは高さまたは最小高さで試すことができます。この計算機能を使用して、次のような他の計算もできます。

 height: -moz-calc(100% - 50px);

そして、ご想像のとおり、これはときどき非常に役立ちます。

2
jsidera

height:100%は、手元のコンテナとともに流れるコンテンツの高さであり、フロートされたコンテンツは考慮されていないため、コンテナの高さが短くなっています。それを削除し、コンテナを適切にクリアして、フロート要素をクリアしてください。

#static-content:before, #static-content:aftr {
 display:table;
 content:"";
}

#static-content:after {
 clear:both;
}

#static-content {
 zoom:1; /*ie fix*/
}
1
Andres Ilich

static-maincontentにfloatがあり、ドキュメントのコンテンツの通常のフローから削除されているため、static-contentは高さを気にしないため、勝ちましたそれをカバーするために拡大しないでください。さらに、height:100%のstatic-contentを削除します。

0
Abhranil Das

回答をお読みください!!!-わかりましたので、同じ問題が発生しました。「配置」スタイルを削除するだけで済みました。完全に問題なく動作するはずです。

0
user4895927