Maison > interface Web > Questions et réponses frontales > Comment mettre div en bas en HTML

Comment mettre div en bas en HTML

青灯夜游
Libérer: 2023-02-17 17:38:33
original
21652 Les gens l'ont consulté

Comment placer un div en bas du HTML : 1. Utilisez l'attribut position pour positionner la balise div par rapport à la fenêtre du navigateur, avec la syntaxe "div{position:fixed;}" 2. Définissez ; la distance jusqu'au bas à 0 Pour placer le div toujours en bas de la page, la syntaxe est "div{bottom:0;}".

Comment mettre div en bas en HTML

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

html mettre le div en bas

<!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>
Copier après la connexion

Rendu :

Comment mettre div en bas en HTML

Corrigé Positionnement (position : fixe ;)

fixe génère un élément de positionnement fixe. L'élément est séparé du flux de documents et n'occupe pas la position du flux de documents. Il peut être compris comme flottant au-dessus du. flux de documents et par rapport à la position de la fenêtre du navigateur.

Si vous souhaitez définir un positionnement fixe dans le modèle de calque pour un élément, vous devez définir position:fixed; et utiliser directement la fenêtre du navigateur comme référence pour le positionnement, et elle flotte dans la page. la position de l'élément ne suivra pas la fenêtre du navigateur. La barre de défilement change à mesure que vous faites défiler, à moins que vous ne déplaciez la position de la fenêtre du navigateur sur l'écran ou que vous modifiiez la taille d'affichage de la fenêtre du navigateur, de sorte que les éléments positionnés de manière fixe seront toujours situés quelque part. dans la vue dans la fenêtre du navigateur et ne sera pas affecté par les effets du flux de documents.

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal