HTMLの一番下にdivを置く方法-フロントエンドQ&A-php.cn

HTMLの一番下にdivを置く方法

青灯夜游

リリース： 2023-02-17 17:38:33

オリジナル

21650 人が閲覧しました

htmldiv を下部に配置する方法: 1. 構文 "div{position:fixed;}" を使用して、position 属性を使用して、ブラウザウィンドウを基準にして div タグを配置します。 2. 距離を設定します。常にページの最後に div を配置するには、構文は「div{bottom:0;}」です。

HTMLの一番下にdivを置く方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

htmldiv を一番下に配置します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body{
				height: 500px;
				background: palegoldenrod;
			}
			div{
				border: 1px solid red;
				position:fixed; 
				bottom:0;
			}
		</style>
	</head>

	<body>
		<div>测试文本测试文本测试文本测试文本测试文本测试文本测试文本</div>
	</body>

</html>

ログイン後にコピー

レンダリング:

HTMLの一番下にdivを置く方法

固定位置(position: fix;)

fixed は、固定位置要素を生成します。要素はドキュメントフローから分離されており、ドキュメントフローの位置を占めません。ドキュメント上に浮いていると理解できます。フローとブラウザウィンドウに対する相対的な位置。

レイヤーモデルで要素の固定位置を設定したい場合は、position:fixed; を設定し、ブラウザウィンドウを位置決めの参照として直接使用する必要があります。要素の位置はブラウザウィンドウに従いません。画面上でブラウザウィンドウの位置を移動したり、ブラウザウィンドウの表示サイズを変更したりしない限り、スクロールバーはスクロールに応じて変化するため、固定配置された要素は常にどこかに配置されます。ブラウザウィンドウ内のビューに表示され、ドキュメントフロー効果の影響を受けません。

(学習ビデオ共有: css ビデオチュートリアル)

以上がHTMLの一番下にdivを置く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。