ホームページ > 記事 > ウェブフロントエンド > HTMLの一番下にdivを置く方法
HTMLの一番下にdivを置く方法
- 青灯夜游オリジナル
- 2021-03-02 17:44:5821587ブラウズ
htmldiv を下部に配置する方法: 1. 構文 "div{position:fixed;}" を使用して、position 属性を使用して、ブラウザ ウィンドウを基準にして div タグを配置します。 2. 距離を設定します。常にページの最後に div を配置するには、構文は「div{bottom:0;}」です。
このチュートリアルの動作環境: 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>レンダリング:
固定位置(position: fix;)
fixed は、固定位置要素を生成します。要素はドキュメント フローから分離されており、ドキュメント フローの位置を占めません。ドキュメント上に浮いていると理解できます。フローとブラウザ ウィンドウに対する相対的な位置。
レイヤー モデルで要素の固定位置を設定したい場合は、position:fixed; を設定し、ブラウザ ウィンドウを位置決めの参照として直接使用する必要があります。要素の位置はブラウザ ウィンドウに従いません。画面上でブラウザ ウィンドウの位置を移動したり、ブラウザ ウィンドウの表示サイズを変更したりしない限り、スクロール バーはスクロールに応じて変化するため、固定配置された要素は常にどこかに配置されます。ブラウザ ウィンドウ内のビューに表示され、ドキュメント フロー効果の影響を受けません。
(学習ビデオ共有: css ビデオ チュートリアル)
以上がHTMLの一番下にdivを置く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。