I'm trying to make a function using JQuery that eliminates the blank space that I have left in the pages whose content is very small. Attached an image to clarify the situation:
The idea that I have been told is by JQuery calculate the size of the page and that annoying blank space fill it in the middle of the page. And that the footnote that I have reaches the end.
You can add a minimum height to the text block, so that when the text is long it occupies everything you need and in case the text is very short, it occupies at least x pixel.
.bloque_texto{
height: auto;
min-height: 500px;
}
You can use the sticky "footer" technique.
The idea is that the "footer" is positioned absolutely, in a container that has at least the full height of the page.
The structure is like this:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
position: relative;
height: auto;
min-height: 100%;
background-color: green;
}
header {
background-color: red;
}
#content {
padding-bottom: 100px;
background-color: yellow;
}
footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: grey;
}<div id="container">
<header id="header">El encabezado</header>
<div id="content">
<h2>Contenido</h2>
<p>
Contenido que no es tan largo
</p>
</div>
<footer id="footer">
El "footer" se posiciona de forma absoluta, y el padding inferior en #content evita que si la página es muy larga, este se superponga.
</footer>
</div>Important to keep in mind that you must know the height of the footer.