web-dev-qa-db-ja.com

CSSの高さは機能しますが、最小の高さは機能しません

私は奇妙なかなり奇妙な問題を抱えています。問題は、最小の高さを100％に設定したいという小さな問題です。つまり、ページのコンテンツはユーザーの画面全体に広がり、可能であれば、コンテンツが100％を超えるとページが下に伸びます。簡単な方法は、min-height：100％を設定し、height：autoを設定することです。これはまさに私が望むものですが、何度試しても問題は解決しません。

すべての要素でheightautoと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/

htmlcsstwitter-bootstraptwitter-bootstrap-3
12
Ahmar Ali

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

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

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

CSS2.1の仕様：

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

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

10
Armel Larcier