JQUERY (javascript) CSS y HTML: igualar el alto (Height) de un DIV a otro

Buenas a todos

Tengo la tipica seccion de dos columnas (50%) donde la parte izquierda es una foto y la derecha es texto. La columna de texto es mucho mas alta, pero quiero que los divs esten igualados en altura al de la foto, para que en la parte del texto salga scroll

Con esta sencilla funcion que he tardado mas de dos horas en encontrar en google, y no entera si no cogiendo cachitos de aqui y cachitos de alli (por eso no indico fuente) podreis realizar lo que os cuento xDD


<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {

//alert('El alto del div es de: ' + $("#b4image").innerHeight() + 'pixels');
var newHeight2 = $("#b4image").innerHeight();
$("#b4text").height(newHeight2);

});

</script>

El alert es solo para comprobar que la funcion esta operativa

Lo que hace es igualar el alto del div con id b4text al de la imagen

Podria ser que el desencadenante de la funcion o “escuchador” document.ready pueda crear problemas al trabajar con imagenes por los tiempos de carga.

Hay otros desencadenantes o listeners que google os enseñara encantado xDD

#CSS div height: 100% – Alto de capa para chrome, firefox y explorer by @zoneartcss

Fuente: zoneartcss.com

Bua…. como lo dice el titulo… porfin una solucion, sino la correcta, supongo que la unica por el momento… (y si me equivoco manda la tuya haciendo click aqui), y siempre que necesitamos dar esteefecto en nuestros diseños… acabamos haciendolo con javascript… o si tenemos un diseño fijo, estatico, pues optamos por el uso de una imagen de fondo… que no es lo mas conveniente en algunas ocaciones pero si nos ahorra horas y frustraciones pero bueno. eh aqui la solucion para igualar nuestras columnas, cuando estan dentro de un div contenedor… y dar el efecto de divs relativamente iguales en su altura...

Al lio… tenemos nuestro div contenedor (class=”all”) y dentro tenemos otros 2 div ‘s (class=”contenido” y class=”lateral”) y queremos que tengan la misma altura cubriendo asi el 100% del contenedor (class=”all”)… entonces el html es:…

<div class="all">
    <div class="contenido">
        <p>nuestra primera columna</p>
    </div>
    <div class="lateral">
        <p>nuestra segunda columna.</p>
    </div>
</div>

Ahora para dar el efecto necesitamos hacer uso del “overflow” para que nos oculte el scroll que nos da el “padding” y el “margin“, que son ridiculamente enormes y nos da mucha altura.

.all{overflow:hidden;}
.contenido, .lateral{float:left;padding-bottom:30000px;margin-bottom:-30000px;}

Click para ver demo en linea

#CSS height: 100% – Alto de capa que sea el de la ventana del navegador SOLO PARA EXPLORER by @deswebcom

Fuente : Miguel Angel Alvarez – desarrolloweb.com

Este ejemplo SOLO FUNCIONA en EXPLORER

Necesitaba un div que fuera tan alto como el total de la web (vamos, como el contenido) y olvidarme de medir y esas cosas tan divertidas

El titulo de este post me llevo a dudar hasta que probe el ejemplo, pense que me haria el div tan alto como la ventana del navegador y luego no seguiria alargandose con el contenido de la web … pero afortunadamente se estira hasta el infinito y mas alla!!

Aqui os dejo el ejemplito, perdonad mi explicacion enrevesada pero ahora os haceis una idea de porque me echaron de la real academia de la lengua, verdad? …


<html>
<head>
<title>maquetado CSS utilizando todo el height</title>

<style type="text/css">
html,body{
margin:0px;
height:100%;
}
</style>

</head>
<body>

<div id="map" style="height: 100%;background-color:#ffff99;">Contenido que tiene que ocupar todo el espacio del navegador.</div>

</body>
</html>