Buenas,
Tengo un pequeño problema con la acción overflow: scroll
. Esta acción se aplica en un div, que al cargar la página está vacío, y que al rellenar un formulario se muestran los resultados. Es la caja donde se muestran los resultados de una búsqueda, por si puede ayudar a la comprensión.
El caso es que al cargar la página se ve ese pequeño recuadro en blanco debajo de la barra del buscador:
Cuando se tendría que ver así.
Necesito usar overflow: scroll
debido a que la caja de la búsqueda no quiero que muestre más de 3 resultados en pantalla, y que gracias al scroll, se puedan ver el resto de resultados que coinciden con la búsqueda.
El código HTML:
<form class="busqueda" action="busqueda.php" method="get">
<input type="text" id="busqueda" name="busqueda" placeholder="Buscar un juego..." autocomplete="off" onKeyUp="buscar();">
<button type="submit" name="button" class="fa fa-search"></button>
</form>
<div id="resultadoBusqueda"></div>
Código CSS:
#resultadoBusqueda {
z-index: 1000;
background: white;
position: absolute;
top: 50px;
width: 300px;
max-height: 228px;
overflow: scroll;
box-shadow: .1px .1px 2px #888888;
}
¿Hay alguna forma sin complicarse mucho la vida para hacer desaparecer ese recuadro cuando el div resultadoBusqueda
esté vacío que va a ser siempre que se cargue la página sin tener que quitar el overflow: scroll?
resultadoBusqueda.style.display = 'none';
y hacerlo aparecer cuando llenes resultadoBusqueda