18

私は奇妙なかなり奇妙な問題を抱えています。問題は小さなもので、min-height を 100% に設定したいということです。つまり、ページのコンテンツはユーザーの画面全体にまたがる必要があり、可能であれば、コンテンツが 100% を超える場合はページを下に拡張する必要があります。簡単な方法は、 min-height:100% を設定し、 height:auto を設定することです。これはまさに私が望むものですが、何回試しても問題は残ります。

すべての要素で height auto と min-height:100% を使用していますが、機能しません。min-height を削除して height:100% のみを含めると、魅力的に機能しますが、コンテンツが大きくなるとフッター全体がオーバーフローします。

ここにcssがあるので助けてください：

html, body, container, row, col-lg-3, col-lg-9 {
     min-height: 100%;
     height: auto !important;
     height: 100%;
 }
 .container {
     max-width: 1170px;
     min-height: 100%;
     height: auto !important;
     height: 100%;
 }
 .col-lg-3 {
     min-height:100%;
     height:100%;
 }
 .col-lg-9 {
     min-height: 100%;
     height: 100%;
 }

ここに問題を示すページがあります: http://contestlancer.com/ai/GP/

4

1 に答える 1

16

はい、これは苦痛ですが、それがどのように機能するかです。高さは配置された親から継承できますが、これらにmin-heightプロパティがある場合は継承できません。

min-heightに設定されている要素の子は、100%パーセンテージを介して親の高さを継承できません...

https://stackoverflow.com/a/8468131/1491212

CSS2.1仕様：

パーセンテージは、生成されたボックスの包含ブロックの高さに関して計算されます。包含ブロックの高さが明示的に指定されておらず (つまり、コンテンツの高さに依存する)、この要素が絶対配置されていない場合、値は「auto」と計算されます。

コンテナーで使用position: relative; height: 100%して問題を回避min-height: 100%;し、最も深い子に追加します。

于 2013-07-31T11:31:53.083 に答える