ページの構造は非常にシンプルです
すごいです
その中で、ヘッダーとフッターは特定の条件に基づいて動的に選択され、導入されます。つまり、ヘッダーとフッターの高さが変わる可能性があります。
遭遇する問題は、コンテンツのコンテンツが非常に少ない場合、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 を使用するしかありません。
HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AMHTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。
マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AMHTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。
HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AMHTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AMHTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AMhtmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。
HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AMHTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
SublimeText3 中国語版
中国語版、とても使いやすい
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
