15 Feb

divs con alto al 100% sin asignarle 100% al elemento padre

Heightal100

Para muchos de nosotros es un dolor de cabeza ajustar un elemento como un «div» al alto de un contenedor,  he visto soluciones a este problema en los que el truco esta en dejar los elementos padre al 100%, algo como esto:

Solucion 1. No aplica en todos los casos

HTML

<body>
  <div id="padre">
    <div id="hijo">
      Cotenedor al 100% de alto
    </div>
  </div>
</body>

CSS

#padre{
  height:100%;
}
#hijo{
  height:100%;
}

Otros recomiendan dejar 100% al html y al body:

html, body{
  height:100%;
}

Solucion 2. Más efectiva!

He trabajado con archivos css demasiado extensos, intente con la tecnica anterior dejar un «sidebar» dentro de un contenedor al 100%, pero ninguno me funcionó, por más que colocaba height:100% al llegar al punto que lo coloque casi a todos los elementos padre. y tenia una solución temporal con jquery (no se debería recurrir a jquery para esto!).

En el siguiente ejemplo usare 3 elementos principales:

  1. #padre: Esel contenedor general o «wrapper» como lo definen algunos.
  2. #sidebar: La barra lateral, la cual tomara el alto al 100%.
  3. #contenido: Es el contenido del texto principal.

#padre

Defino un ancho, lo centro con margin: 0 auto; y no se nos puede pasar: dejar la posición relativa.

#padre{
  background:#CBD1DC;
  margin:0 auto;
  margin-top:10px;
  position:relative;
  width:600px;
}

#sidebar

Coloco la posición absoluta, para que pueda colocar por posiciones libremente dentro del contenedor #padre, gracias a que este ultimo tiene posición relativa. Le doy un ancho, y para que el contenedor se «adhiera» tanto arriba como abajo y de el 100%, coloco un top y bottom definido.

Este es el truco!:  bottom y top en 0px.

#sidebar{
  background:#FE5B2C;
  bottom:0px;
  color:#FFF;
  font-size:35px;
  font-weight:bold;
  padding:25px;
  position:absolute;
  text-align:center;
  text-shadow:-1px -1px #A62C02;
  top:0px;
  width:150px;
}

#contenido

El contenido va al lado opuesto del sidebar, por lo que coloco un float right (a la derecha).

#contenido{
  background:#E7EBF1;
  color:#42474F;
  float:right;
  padding:25px;
  text-align:justify;
  width:350px;
}

HTML

Importante!:  hacer un clear debido al float right del contenido, esto se hace antes de cerrar el ultimo div

<br style=»clear:both»/>

<body>
<div id="padre">
<div id="sidebar">
<p>Height al 100%!</p>
</div>
 <div id="contenido">
 <h2>Sidebar crece con el contenido!</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at turpis nulla. Aliquam velit nisi, consectetur eget auctor nec, luctus non neque. Ut sit amet justo nisi. Suspendisse nec neque libero. In gravida eros libero, ut sagittis elit. Aenean est sem, suscipit vitae vulputate et, euismod lacinia odio. Ut pretium leo ut enim dignissim ullamcorper scelerisque justo eleifend. Aliquam sodales enim sed felis volutpat ac vestibulum tellus scelerisque. Vestibulum eu turpis ut erat hendrerit euismod. Proin velit eros, varius eu aliquet sit amet, fermentum ut nisi. Maecenas eu turpis tellus. Quisque nec neque turpis. Nulla facilisi.</p>
 <p>Vivamus nisi lectus, commodo et dapibus a, tempor sit amet ipsum. Quisque lobortis, leo vitae placerat aliquam, dolor nibh interdum lectus, non dapibus lorem risus in elit. In gravida lobortis nibh, quis suscipit nunc aliquam sed. Proin faucibus, purus id ornare vestibulum, libero quam commodo magna, eget posuere ante leo id nulla. Nullam tortor est, cursus vitae bibendum a, feugiat et neque. Aenean sed lacus ac sem varius faucibus ut ut lectus. Quisque a diam eu risus tempus faucibus. Morbi neque est, laoreet sed imperdiet id, bibendum nec enim.</p>
 <p>Curabitur quis ornare orci. Nam lacinia, nibh quis elementum blandit, purus eros bibendum augue, a lobortis eros elit at libero. Pellentesque rutrum tellus sit amet ligula sodales bibendum. Cras posuere mauris in enim mollis convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc in lacus felis, in tempus mauris. Nunc sollicitudin interdum dolor, porta consectetur dolor lobortis eu. Phasellus quis nibh vel erat lacinia aliquam. Maecenas aliquam interdum purus, ac suscipit ante condimentum varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie tellus at est vulputate a porta massa pretium.</p>
 </div>
 <br style="clear:both"/>
</div>

 
 

Descargar CódigoDemo

 
 

23 Jul

Maquetar con divs como si fuese una tabla

Muchos de los que comenzamos maquetando, comenzamos a extrañar los comportamientos que tenian las tablas, y que era algo facil de acomodar los elementos.

Pero recordemos que ahora las tablas no se usan para maquetacion, en cuanto al diseño se refiere. Las tablas se deberían usar para tabular datos, como un listado de varios elementos.

Lo bueno del caso es que existe una manera de «imitar» el comportamiento de las tablas con capas, gracias a la propiedad display.

Muchos de los que comenzamos a maquetar conocemos las básicas que son:

display:

block

Inline

None

pero además existen:

display:

table

table-row

table-cell

Las anteriores propiedades son las necesarias para poder imitar el comportamiento de una tabla ya que tendriamos el elemento <table>, <tr> y <td>

Aca la demostración:

Partamos con un ejemplo de una tabla, que tiene 3 columnas:

Es una estructura sencilla para representar una tabla de 1 fila y 3 columnas. Ahora llevando este mismo concepto a divs tendriamos un resultado como el siguiente:

Teniendo en cuenta la grafica anterior:

Tendríamos nuestros equivalentes:

<table> sería equivalente a <div class=»contenedor-tabla«>

<tr> sería equivalente a <div class=»contenedor-fila«>

<td> sería equivalente a<div class=»contenedor-columna«>

Yo creo que ya esta entendida la idea. Nuestro codigo html sería:

HTML

<div class=»contenedor-tabla»>
    <div class=»contenedor-fila»>
        <div class=»contenedor-columna»>
Columna 1
         </div>

        <div class=»contenedor-columna»>
             Columna 2
        </div>

        <div class=»contenedor-columna»>
Columna 3
        </div>
    </div>
</div>

CSS

.contenedor-tabla{

display: table;

}

.contenedor-fila{

display: table-row;

}

.contenedor-columna{

display: table-cell;

}