El diseño del Santo Grial es un problema clásico de CSS en el desarrollo web. Aunque hay muchas soluciones creativas desarrolladas en HTML y CSS, el problema que se enfrentaba era que implicaba sacrificios en los que el enriquecimiento de una característica a menudo se ve comprometido a expensas de las demás. Los marcos modernos como Bootstrap 4 brindan utilidades para implementar este diseño fácilmente. Algunos de los requisitos en este diseño de diseño son:
- Una página con encabezado, pie de página y tres columnas fluidas receptivas.
- La columna central contiene el contenido principal.
- Las columnas izquierda y derecha contienen contenido para anuncios/navegación.
- Deben requerir un marcado mínimo.
- El pie de página debe ‘pegarse’ a la parte inferior de la página cuando el contenido es escaso.
Enfoque: Vamos a usar Bootstrap 4 para implementar un diseño simple para el mismo. Los componentes que vamos a utilizar directamente para implementar este diseño son:
- Barra de navegación receptiva
- Fluid Grid System BS4 proporciona un sistema de diseño receptivo compatible con todos los dispositivos.
- Clases de utilidad de margen y relleno sensibles Las propiedades como margen y relleno se pueden aplicar directamente mediante clases de utilidad.
- Pie de página receptivo (con algunos ajustes según los requisitos) La propiedad Flex CSS utilizada se puede leer aquí .
Para obtener información sobre BS4, puede leer la documentación aquí .
Solución:
HTML
<!-- Here, you are provided button 'Toggle' to hide & show content
to help you understand how sticky footer with flex is working. -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta adjustments -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Imported libraries using CDN -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<!-- CSS configuration for the document -->
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.main {
flex: 1 0 auto;
}
h1 {
color: white;
}
p {
background-color: #efece9;
border-radius: 4px;
padding-left: 8px;
}
.card {
border-radius: 12px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.card-header:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom: 1px solid floralwhite;
}
.card-body {
min-height: 160px;
}
.card-footer {
padding-bottom: 0px;
}
footer {
flex-shrink: none;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-light justify-content-center">
<span class="navbar-brand mb-0 h1">
GeeksforGeeks
</span>
</nav>
<!-- Body Content -->
<div class="container-fluid main">
<div class="row">
<!-- Navigation/Other Links -->
<div class="col-sm-2">
<div class="container">
<div class="card w-100">
<div class="card-body">
<p>DSA Course</p>
<p>Machine Learning</p>
<p>Front End Course</p>
</div>
</div>
</div>
</div>
<!-- Content Panel -->
<div class="col-sm-8">
<div class="container">
<div class="card w-100">
<div class="card-header">
<button class="btn btn-success
btn-block">
Toggle for Langugaes
</button>
</div>
<!-- This is the content deciding
the nature of the footer -->
<div class="card-body content">
<p> </p>
<p> C </p>
<p> C++ </p>
<p> Java </p>
<p> Python </p>
<p> C# </p>
<p> JavaScript </p>
<p> jQuery </p>
<p> SQL </p>
<p> PHP </p>
</div>
</div>
</div>
</div>
<!-- Advertisement -->
<div class="col-sm-2">
<div class="container">
<div class="card w-100">
<div class="card-body">
<p>Adv - 1</p>
<p>Adv - 2</p>
<p>Adv - 3</p>
<p>Adv - 4</p>
<p>Adv - 5</p>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<!-- Footer ('flex-shrink' property applied here)-->
<footer class=" bg-success">
<div class="container text-center">
<small style="color:white;">
<b>GeeksforGeeks: </b>
A Computer Science Portal for Geeks </small>
</div>
</footer>
<!-- jQuery implementation for showing and hiding Content -->
<script>
$(document).ready(function () {
$('button').click(function () {
$('.content').toggle('slow');
});
});
</script>
</body>
</html>
Producción:
- Cuando el contenido está oculto:
- Cuando se muestra el contenido:
Publicación traducida automáticamente
Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA