ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS で min-height を body に設定しても効果がないのはなぜですか?

CSS で min-height を body に設定しても効果がないのはなぜですか?

黄舟
リリース: 2017-07-21 09:53:06
オリジナル
4084 人が閲覧しました

Webページのコンテンツ領域にコンテンツがほとんどない場合、フッターが上部に表示されますか?
bodyとhtmlにmin-height:100%;を設定しましたが、効果がありません
height:100%;を設定しても問題ありませんが、コンテンツが多すぎると1つの画面に収まりますか?

body,html{   min-height:100%;
}body{   position:relative;
}.content{  podding-bottom:100px;
}.footer{position:absolute;bottom:0;left:0;height:100px;
}
ログイン後にコピー

次のように記述します:

html {    
height: 100%;
}
body {    
position: relative;    
min-height: 100%;   
 box-sizing: border-box;    
 padding-bottom: 80px; /* .footer 的高度,为 footer 占位 */}
 .footer {    
 position: absolute;    
 bottom: 0;    
 left: 0;    
 width: 100%;    
 height: 80px;
}
ログイン後にコピー

上記のコードはIE8以降と互換性があります

私もそのような問題に遭遇したことがありますが、次のように解決しました:

html,body,.content{    
min-height:100%;
}
html{    
-ms-text-size-adjust: 100%;    
-webkit-text-size-adjust: 100%;
}
body{    
background:#eeeeee;
}
ログイン後にコピー

次に、jsを使用して$(".content"を制御します) ) .height($("html").height); この調整はより信頼性が高いと感じます

比較のために親要素に100%基づいています。たとえば、

<div style="width:100px;">
    <div style = "width:50%;"></div>
</div>
ログイン後にコピー

元の投稿者の質問に戻るので、HTMLのみです。固定の高さを設定し、本体の高さのパーセンテージを設定できる場合は、まず HTML 要素の高さを設定します。

以上がCSS で min-height を body に設定しても効果がないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート