[アドバイス] css3を使用してdivの高さを適応させるにはどうすればよいですか? _html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

[アドバイス] css3を使用してdivの高さを適応させるにはどうすればよいですか? _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:50 AM

ページの構造は非常にシンプルです
すごいです

その中で、ヘッダーとフッターは特定の条件に基づいて動的に選択され、導入されます。つまり、ヘッダーとフッターの高さが変わる可能性があります。
遭遇する問題は、コンテンツのコンテンツが非常に少ない場合、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;}

display:box;

box-flex:

ああ、8 階で言及されたスクロールバーの問題は解決されました。
はは、CSS を長いことやっていなかったので、とても混乱しています。

次に、別の質問は、IE はこの属性をサポートできるかということです。

.content{ height:auto; min-height:600px;}

すみません、この 600px は現在の最小ディスプレイが「1024*768」であることを想定していますか?
または、600 の設定を使用するのはどこから来たのでしょうか。

1920*1200 モニターでページを読むと、フッターがページの中央に浮かんだままになります。
次に、さまざまな解像度に適応させたい場合は、js を使用する必要があります。

これを自分で書くこともできるはずですが、これを処理するために JS を使用したくありません。
見てみましょう。他に方法がない場合は、JS を使用するしかありません。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLタグとHTML属性の違いは何ですか？May 14, 2025 am 12:01 AM

htmltagsdeTheStructureOfawebpage、whiLeattributesdddddddddtetails.1）tagslike、andoutlineThecontentのsplacement.2）属性、クラス、およびスチリーンハンシテアグビーズイメージソース、スタイリング、および改善、および改善の想像力。

HTMLの未来：進化とトレンドMay 13, 2025 am 12:01 AM

HTMLの未来は、よりセマンティック、機能的、モジュール式方向に発展します。 1）セマンティック化により、タグがコンテンツをより明確に説明し、SEOとバリアのないアクセスを改善します。 2）機能化は、ユーザーのニーズを満たすために新しい要素と属性を導入します。 3）モジュール性は、コンポーネントの開発をサポートし、コードの再利用性を改善します。

Web開発にとってHTML属性が重要なのはなぜですか？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevevermentmentmentmentmentmentmentmention behavior、like、andfunctionality.theyenhance -interactivity、accessibility、andseo.forexample、thesrcattribute intagsimpactsseo

Alt属性の目的は何ですか？なぜそれが重要なのですか？May 11, 2025 am 12:01 AM

ALT属性は、HTMLのタグの重要な部分であり、画像の代替テキストを提供するために使用されます。 1.画像をロードできない場合、ALT属性のテキストが表示され、ユーザーエクスペリエンスが向上します。 2。スクリーンリーダーは、ALT属性を使用して、視覚障害のあるユーザーが写真の内容を理解するのに役立ちます。 3. ALT属性のEnginesインデックステキストを検索して、WebページのSEOランキングを改善します。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform