Buenas
Ando realizando una web que aparentemente estaba bien estructurada hasta que he metido contenido en el cuerpo de la misma y la barra lateral que tengo (que antes ocupaba el lateral de la pantalla al completo) se queda fija (de forma que cuando el usuario se desplaza hacia abajo, deja de estar visible), y yo lo que quiero es que, ademas de que ocupe todo lo alto de la pantalla donde se visualice, que se quede fija en la pantalla de forma que siempre este visible para el usuario (igual que ocurre con la barra superior de esta web)
He estado buscando por internet y he encontrado que seleccionando la etiqueta html body y la barra lateral y usando el atributo "height: 100%;" deberia estirarse hasta ocupar toda la pantalla, pero nada.
Codigo de HTML
<div id="sidebar">
<!-- Logo -->
<h1 id="logo"><a href="#">TITULO</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="http://www.facebook.com/sharer.php?u=URL" target="_blank"><img src="images/botones/facebook.png" height="40em" width="40em" alt="Facebook" /></a>
<a href="https://plus.google.com/share?url=URL" target="_blank"><img src="images/botones/google.png" height="40em" width="40em" alt="Google" /></a>
<a href="https://twitter.com/share?url=URL.one&text=Visita%20la%20web&hashtags=URL" target="_blank"><img src="images/botones/twitter.png" height="40em" width="40em" alt="Twitter" /></a>
<ul>
<li><a href="index.html">Portada</a></li>
<li><a href="BLABLA.html">BLABLA</a></li>
<li><a href="BLABLA.html">BLABLA</a></li>
<li><a href="BLABLA.html">blabla</a></li>
<li><a href="BLABLA.html">bLABLA</a></li>
</ul>
</nav>
<!-- Text -->
<section class="box text-style1">
<header>
<h2>Banners</h2>
</header>
<a href="URL"><img src="urldeimagen.jpg" width="180" height="100" alt=""></a>
</section>
<!-- Recent Posts -->
<section class="box recent-posts">
</section>
Codigo de CSS
#sidebar {
color: #aaa;
color: rgba(255, 255, 255, 0.55);
text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
width: 14em;
padding: 3em 1.35em 1em 1.15em;
background: #364050 url("images/bg01.png");
overflow-y: auto;
left: 0;
box-shadow: inset -0.1em 0em 0.35em 0em rgba(0, 0, 0, 0.15);
position: relative;
}
#sidebar section, #sidebar nav {
position: relative;
margin: 2em 0 0 0;
font-size: 0.9em;
}
#sidebar section:before, #sidebar nav:before {
content: '';
border-top: solid 1px;
border-bottom: solid 1px;
border-color: #171E29;
border-color: rgba(0, 0, 0, 0.25);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075), 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
display: block;
height: 0.5em;
margin: 0 0 2em 0;
}
#sidebar strong, #sidebar b {
color: #fff;
}
#sidebar a {
color: #d4dde0;
}
#sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6 {
color: #fff;
}
#sidebar header {
margin: 0 0 1.25em 0;
}
El CSS que pongo ya venia elaborado porque estoy usando una plantilla, y como de css se lo justo pues intento tocarlo solo lo indispensable, lo digo porque lo mismo veis algo que sobra o falta.
Espero que esta vez se una de las ultimas que tenga problemas con la web, porque tras arreglar esto espero no volver a necesitar tocar nada mas (es una web sencilla solo para mostrar contenido), en caso de querer ampliarla creo que usaré wordpress.
Muchas gracias
Edit: #2 ya esta, por cierto, con "todo" te refieres a todo el codigo html o con la barra lateral será suficiente?
Edit2: De hecho he estado probando wordpress y creo que me voy a dejar de tanto codigo.
