barra lateral fijo con la altura del 100% en CSS

que estoy haciendo una barra lateral fijo que resolví here in stack overflow, por lo que ahora tiene una barra fija con este código:barra lateral fijo con la altura del 100% en CSS

<div id="main" style="width:100%;background:red;"> 
    <div id="sidemenu" style="float:left;height:200px;background:#000;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:200px;overflow-y:scroll;background:silver;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div>

Tiene una altura de 200 píxeles (sólo para ver cómo funciona), pero la barra lateral que necesito debe tener una altura del 100% todo el tiempo. He visto varias publicaciones aquí en stackoverflow que dicen que las columnas falsas son una opción: http://www.alistapart.com/articles/fauxcolumns/. Pero dentro de mi <div id="sidebar"> tendré, en algunos casos, 2 DIV más: #menú y # submenú, por lo que el ancho variará.

¿Qué puedo hacer? No necesito soporte para navegadores antiguos: IE9, último Chrome y el último Firefox está bien.

Fuente

2011-11-03 udexter

Agregaría un border-left al cuerpo, obtenga el elemento de menú más largo y haga coincidir su ancho en ccsme, luego establezca un margen negativo en el menú lateral. Entonces va a aparecer para que coincida con lo que la altura de la div de contenido ocupa (ya sea si se establece de manera explícita, o si el contenido se expande):

<body style="border-left: 10em solid #666;"> 

<div id="main" style="background:red;"> 
    <div id="sidemenu" style="float:left;margin-left: -10em;width:10em;background:#666;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     very long menu item<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:400px;background:silver;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div> 

</body>

Para una barra lateral con una textura de fondo (un método), usted podría establecer el ancho en píxeles para que coincida con el ancho de la textura (no tan flexibles como eMS, pero si se establece en el punto más ancho, debería estar bien) y se repite el textura a lo largo del eje y:

<div id="main" style="background: url(pattern_157.gif) repeat-y;"> 
    <div id="sidemenu" style="float:left;width:200px;background: transparent;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     very long menu item<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:600px;background:transparent;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div>

Fuente

2011-11-03 09:50:31

hey @Dave! Esta es una buena solución pero ... ¿qué pasa si el menú lateral tiene una imagen de fondo (una textura) cómo vas a resolver eso? ¡Gracias de antemano! – udexter

@udexter - un ejemplo añadido a la respuesta anterior - hay varias formas de hacerlo, pero este fue el primero que se me ocurrió ... –

es el problema que el fondo de tu columna tiene algún tipo de gradiente? Si solo es de color sólido, ¿no podría simplemente dejar el ancho de las 2 columnas sin unir y colocar la imagen de fondo en el eje x y en el eje y?

Fuente

2011-11-03 09:52:54 Brighty

sí, tiene una textura adjunta – udexter

¿Qué tal si hicieras tu imagen texturizada? 9000px de ancho, pero coloca el contenido div en un índice z más alto que el sidemenu div? – Brighty

Aquí hay otra idea para esto con el posicionamiento fijo y la altura del 100%. También coloqué suficientes saltos para mostrar cómo se desplazará el contenido, pero la barra lateral y su contenido permanecerán donde están.

<body style="margin:0;"> 
    <div id="main"> 
     <div id="sidemenu" style="width:200px; position:fixed; height:100%; background: url(http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_1.jpg) repeat;"> 
      menu<br /> 
      menu<br /> 
      menu<br /> 
      very long menu item<br /> 
      menu<br /> 
      menu<br /> 
     </div> 
     <div id="content" style="background:transparent; float:left; margin:0 0 0 220px;"> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
     </div> 
    </div> 
</body>

Fuente

2012-07-02 15:57:31

barra lateral fijo con la altura del 100% en CSS

Respuesta

Cuestiones relacionadas