Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: t4r0x en 8 Septiembre 2015, 08:53 am


Título: Ayuda estableciendo altura de menu con CSS, HTML
Publicado por: t4r0x en 8 Septiembre 2015, 08:53 am
Buenas veran tengo un dia entero tratando de hacer que el height de un menu vertical sea mas o menos como automatico ( auto ) pero a la vez al 100%, he probado y buscado y no encuentro una solucion!

para darme entender de la manera mas facil hice un simple que simula mi situacion, el codigo es muy simple tengo dos Div's, el primero es el que funciona como menu vertical, el segundo para contener texto, controles y demas, el problema viene cuando tengo una tabla y este sobre pasa la altura del Divs, el div al que pertenece se "estira" todo bien, pero el menu no lo hace y no encuentra una manera para hacer que lo haga, alguna idea?

(http://s7.postimg.org/kh0jjete3/Untitled.png)

Código
  2.  
  3.  
  4. *
  5. {
  6.     margin: 0;
  7.     padding 0;
  8.     box-sizing: border-box;
  9. }
  10.  
  11. body
  12. { 
  13.     width: 100%;
  14.     height: 100%;
  15.     overflow: auto;
  16. }
  17.  
  18. .sidebar
  19. {
  20.     float: left;
  21.     background-color: #c0392b;
  22.     width: 200px;
  23.     height: 100%;
  24. }
  25.  
  26. .container
  27. {
  28.     background-color: #34495e;
  29.     width: 100%;
  30.     height: auto;
  31. }
  32.  
  33. .mylist
  34. {
  35.     margin-top: 80px;
  36. }
  37.  
  38. .mylist li
  39. {
  40.     padding: 10px;
  41. }
  42.  
  43. .mytable
  44. {
  45.     margin-left: 240px;
  46. }
  47.  
  48.  
  50.  
  53.     <div class='sidebar'>
  54.         <ul class='mylist'>
  55.             <li><a>Link1</a></li>
  56.             <li><a>Link2</a></li>
  57.             <li><a>Link3</a></li>
  58.             <li><a>Link4</a></li>
  59.             <li><a>Link5</a></li>
  60.             <li><a>Link6</a></li>
  61.             <li><a>Link7</a></li>
  62.             <li><a>Link8</a></li>
  63.         </ul>
  64.     </div>
  65.     <div class='container'>
  66.         <div class='mytable'>
  67.             <table border='1'>
  68.                 <tr><td>value1</td><td>value2</td></tr>
  69.                 <tr><td>value1</td><td>value2</td></tr>
  70.                 <tr><td>value1</td><td>value2</td></tr>
  71.                 <tr><td>value1</td><td>value2</td></tr>
  72.                 <tr><td>value1</td><td>value2</td></tr>
  73.                 <tr><td>value1</td><td>value2</td></tr>
  74.                 <tr><td>value1</td><td>value2</td></tr>
  75.                 <tr><td>value1</td><td>value2</td></tr>
  76.                 <tr><td>value1</td><td>value2</td></tr>
  77.                 <tr><td>value1</td><td>value2</td></tr>
  78.                 <tr><td>value1</td><td>value2</td></tr>
  79.                 <tr><td>value1</td><td>value2</td></tr>
  80.                 <tr><td>value1</td><td>value2</td></tr>
  81.                 <tr><td>value1</td><td>value2</td></tr>
  82.                 <tr><td>value1</td><td>value2</td></tr>
  83.                 <tr><td>value1</td><td>value2</td></tr>
  84.                 <tr><td>value1</td><td>value2</td></tr>
  85.                 <tr><td>value1</td><td>value2</td></tr>
  86.                 <tr><td>value1</td><td>value2</td></tr>
  87.                 <tr><td>value1</td><td>value2</td></tr>
  88.                 <tr><td>value1</td><td>value2</td></tr>
  89.                 <tr><td>value1</td><td>value2</td></tr>
  90.                 <tr><td>value1</td><td>value2</td></tr>
  91.                 <tr><td>value1</td><td>value2</td></tr>
  92.                 <tr><td>value1</td><td>value2</td></tr>
  93.                 <tr><td>value1</td><td>value2</td></tr>
  94.                 <tr><td>value1</td><td>value2</td></tr>
  95.                 <tr><td>value1</td><td>value2</td></tr>
  96.                 <tr><td>value1</td><td>value2</td></tr>
  97.                 <tr><td>value1</td><td>value2</td></tr>
  98.                 <tr><td>value1</td><td>value2</td></tr>
  99.                 <tr><td>value1</td><td>value2</td></tr>
  100.                 <tr><td>value1</td><td>value2</td></tr>
  101.                 <tr><td>value1</td><td>value2</td></tr>
  102.                 <tr><td>value1</td><td>value2</td></tr>
  103.                 <tr><td>value1</td><td>value2</td></tr>
  104.                 <tr><td>value1</td><td>value2</td></tr>
  105.                 <tr><td>value1</td><td>value2</td></tr>
  106.                 <tr><td>value1</td><td>value2</td></tr>
  107.             </table>
  108.         </div>
  109.     </div>
  110. </body>
  111. </html>

Título: Re: Ayuda estableciendo altura de menu con CSS, HTML
Publicado por: eLank0 en 8 Septiembre 2015, 11:29 am
Buenas,

La propiedad height con el valor 100% casi nunca funciona. Esto es debido a que el elemento padre no tiene un height fijo. Yo tengo un truquillo para estos casos y es ponerlo en un mediaquery de 1px (este pixel hace de referencia para el %):

Código
  1. @media(min-height:1px) {
  2.     .sidebar
  3.     {
  4.     float: left;
  5.     background-color: #c0392b;
  6.     width: 200px;
  7.     height: 100%;
  8.     }
  9. }

Salu2

Título: Re: Ayuda estableciendo altura de menu con CSS, HTML
Publicado por: t4r0x en 9 Septiembre 2015, 05:17 am
Intente ese codigo, lo agregue al <style> y tambien intente agregar en un archivo css por separado pero no funciono, se mira exactamente igual :P

Título: Re: Ayuda estableciendo altura de menu con CSS, HTML
Publicado por: RaloGomez en 9 Septiembre 2015, 10:53 am
Ves probando valores con el height (Ej: 1500px, 600px..) hasta que se ajuste y listo..

Título: Re: Ayuda estableciendo altura de menu con CSS, HTML
Publicado por: eLank0 en 9 Septiembre 2015, 13:32 pm
O también puedes cambiar de paradigma por completo y usar div FLEX.

Salu2

Título: Re: Ayuda estableciendo altura de menu con CSS, HTML
Publicado por: t4r0x en 9 Septiembre 2015, 13:42 pm
Bueno la verdad no me gustaria tener algo generico y establecer un height y width a 1000px+.

acerca de div FLEX parece que es algo un poco nuevo al menos require de IE 11 y opera 12 :P

parece que como que es imposible hacerlo de forma sencilla, yo he estado buscando por horas :P

Título: Re: Ayuda estableciendo altura de menu con CSS, HTML
Publicado por: #!drvy en 12 Septiembre 2015, 13:31 pm
Tal y como tienes el código, con un position:fixed; debería bastarte, aunque si tienes demasiado contenido en el sidebar tendrás que lidiar con el overflow.

Código
  1. .sidebar {
  2.     position:fixed;
  3.     top:0;
  4.     left:0;
  5.     background-color: #c0392b;
  6.     width: 200px;
  7.     height: 100%;
  8. }


Saludos


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines