Establecer la posición de div en la parte inferior de su contenedor se puede hacer usando la propiedad bottom y position. Establezca el valor de posición en absoluto y el valor inferior en cero para colocar un div en la parte inferior del contenedor. El atributo de posición puede tomar varios valores que se enumeran a continuación:
- absoluto: esta propiedad se usa cuando la posición de una división es relativa a su padre (usado en este ejemplo).
- relativo: esta propiedad se utiliza cuando la posición de una división es relativa a otros componentes en la pantalla.
- fijo: esta propiedad se usa cuando la posición de un componente se fija en la pantalla independientemente de otros componentes HTML (como una nota de pie de página).
La propiedad de posición junto con atributos como izquierda, derecha, arriba y abajo, se pueden usar para mostrar el posicionamiento apropiado. Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>Position a div at bottom</title>
<style>
.main_div {
text-align:center;
position: relative;
left: 100px;
height: 200px;
width: 500px;
background-color: green;
}
.sub_div {
position: absolute;
bottom: 0px;
}
p {
margin-left:110px;
}
</style>
</head>
<body>
<div class="main_div">
<h1>GeeksforGeeks</h1>
<div class="sub_div">
<p>A computer science portal for geeks</p>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, use la tabla para mostrar el contenido en la parte inferior del cuerpo. La propiedad superior e inferior se utiliza para establecer el contenido en la posición superior e inferior.
html
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
background-color:green;
}
.main_div {
height: 100%;
width:100%;
border-collapse: collapse;
}
h1, p {
text-align:center;
}
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<table class="main_div">
<tr>
<td valign="top"><h1>GeeksforGeeks</h1></td>
</tr>
<tr>
<td valign="bottom"><p>A computer science
portal for geeks</p></td>
</tr>
</table>
</body>
</html>
Producción:
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por abhishek vanjani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA