Ayuda estableciendo altura de menu con CSS, HTML

Iniciado por t4r0x, 8 Septiembre 2015, 08:53 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

t4r0x

8 Septiembre 2015, 08:53 AM Ultima modificación: 8 Septiembre 2015, 15:30 PM por #!drvy
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?



Código (html4strict) [Seleccionar]
<style>
   

*
{
   margin: 0;
   padding 0;
   box-sizing: border-box;
}

body
{
   width: 100%;
   height: 100%;
   overflow: auto;
}

.sidebar
{
   float: left;
   background-color: #c0392b;
   width: 200px;
   height: 100%;
}

.container
{
   background-color: #34495e;
   width: 100%;
   height: auto;
}

.mylist
{
   margin-top: 80px;
}

.mylist li
{
   padding: 10px;
}

.mytable
{
   margin-left: 240px;
}


</style>

<html>
<body>
   <div class='sidebar'>
       <ul class='mylist'>
           <li><a>Link1</a></li>
           <li><a>Link2</a></li>
           <li><a>Link3</a></li>
           <li><a>Link4</a></li>
           <li><a>Link5</a></li>
           <li><a>Link6</a></li>
           <li><a>Link7</a></li>
           <li><a>Link8</a></li>
       </ul>
   </div>
   <div class='container'>
       <div class='mytable'>
           <table border='1'>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
               <tr><td>value1</td><td>value2</td></tr>
           </table>
       </div>
   </div>
</body>
</html>

eLank0

#1
8 Septiembre 2015, 11:29 AM Ultima modificación: 8 Septiembre 2015, 15:30 PM por #!drvy
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 (css) [Seleccionar]
@media(min-height:1px) {
   .sidebar
   {
   float: left;
   background-color: #c0392b;
   width: 200px;
   height: 100%;
   }
}

Salu2

t4r0x

#2
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

RaloGomez

#3
9 Septiembre 2015, 10:53 AM
Ves probando valores con el height (Ej: 1500px, 600px..) hasta que se ajuste y listo..

eLank0

#4
9 Septiembre 2015, 13:32 PM
O también puedes cambiar de paradigma por completo y usar div FLEX.

Salu2

t4r0x

#5
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

#!drvy

#6
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 (css,2,3,4) [Seleccionar]
.sidebar {
   position:fixed;
   top:0;
   left:0;
   background-color: #c0392b;
   width: 200px;
   height: 100%;
}


Saludos
Imprimir
Ir Arriba Páginas1
Acciones del Usuario