ホームページ > 記事 > ウェブフロントエンド > [アドバイス] css3を使用してdivの高さを適応させるにはどうすればよいですか? _html/css_WEB-ITnose
[アドバイス] css3を使用してdivの高さを適応させるにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:50:321146ブラウズ
ページの構造は非常にシンプルです
すごいです
その中で、ヘッダーとフッターは特定の条件に基づいて動的に選択され、導入されます。つまり、ヘッダーとフッターの高さが変わる可能性があります。
遭遇する問題は、コンテンツのコンテンツが非常に少ない場合、div の高さが比較的小さいため、大きな画面ではフッターが非常に高い位置に表示されることです。
これはとても醜いです。
百度のホームページのエフェクトのように、画面を大きくしたときに画面下にもフッターが表示されるようにするCSSの書き方を教えてください。
ディスカッションに返信 (解決策)
フッターを配置できます {
position:fix;
bottom: 0
}
フッターを下部に配置します
フッター {
位置: fix;
bottom: 0
}
フッターを一番下まで貼り付けます
ありがとうございます。
ただし、この方法では、
まず、垂直スクロール バーが表示されます。
次に、コンテンツが多すぎると…、
私の理解が正しければ、これが意味します。
<html><head></head><body><div class="header"></div><div class="content"></div><div class="footer"></div></body></html>
私 これが元々のやり方です:
<html> <head> <title>自适应高度测试</title> </head> <style> html body { height: 100%; } .header { height: 100px; } .footer { position: fixed; bottom: 0; } </style><body><div class="header">This is header</div><div class="content">This is content</div><div class="footer">This is footer</div></body></html> その結果、垂直スクロールバーが表示され、フッターがコンターによって画面から直接押し出されました。
アドバイスをお願いします。
<html> <head> <title>自适应高度测试</title> </head> <style> html body { height: 100%; } .header { height: 100px; } .footer { height: 100px; } .content { height: 100%; } </style><body><div class="header">This is header</div><div class="content">This is content</div><div class="footer">This is footer</div></body></html> display:box;
box-flex:
.content{ height:auto; min-height:600px;}
<html><head></head><body><div class="header"></div><div class="content"></div><div class="footer"></div></body></html>
アドバイスありがとうございます。
ここには別の問題があります。つまり、ヘッダーとフッターは動的に導入され、高さが異なる可能性があります。
display:box;
box-flex:
思い出させてくれてありがとう。
すごいです
小さな質問が 2 つあります: 1 つの質問は、コードに問題があるかどうかを確認するのに協力してほしいというものです。3 つのブラウザすべてで垂直スクロール バーが表示されます。
もう 1 つの質問は、この属性はまだ正式にサポートされていないようですよね?
私はブラウザごとにプライベート プロパティ定義を含む CSS を書くのが本当に好きではありません。
.content{ height:auto; min-height:600px;}
すみません、この 600px は現在の最小ディスプレイが「1024*768」であることを想定していますか?
または、600 の設定を使用するのはどこから来たのでしょうか。
1920*1200 モニターでページを読むと、フッターがページの中央に浮かんだままになります。
.content{ height:auto; min-height:600px;}
すみません、この 600px は現在の最小ディスプレイが「1024*768」であることを想定していますか?
または、600 の設定を使用するのはどこから来たのでしょうか。
1920*1200 モニターでページを読むと、フッターがページの中央に浮かんだままになります。
次に、さまざまな解像度に適応させたい場合は、js を使用する必要があります。
display:box;
box-flex:
ああ、8 階で言及されたスクロール バーの問題は解決されました。
はは、CSS を長いことやっていなかったので、とても混乱しています。
次に、別の質問は、IE はこの属性をサポートできるかということです。
.content{ height:auto; min-height:600px;}
すみません、この 600px は現在の最小ディスプレイが「1024*768」であることを想定していますか?
または、600 の設定を使用するのはどこから来たのでしょうか。
1920*1200 モニターでページを読むと、フッターがページの中央に浮かんだままになります。
次に、さまざまな解像度に適応させたい場合は、js を使用する必要があります。
これを自分で書くこともできるはずですが、これを処理するために JS を使用したくありません。
見てみましょう。他に方法がない場合は、JS を使用するしかありません。