¿Cómo mantengo dos divs uno al lado del otro de la misma altura?
Tengo dos divs uno al lado del otro. Me gustaría que la altura de ellos sea la misma, y permanecer igual si uno de ellos cambia de tamaño. Pero no puedo resolver esto. ¿Ideas?
Para aclarar mi confusa pregunta, me gustaría que ambas cajas fueran siempre del mismo tamaño, por lo que si una crece porque se coloca texto en ella, la otra debería crecer para que coincida con la altura.
<div style="overflow: hidden">
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!
</div>
</div>
20 answers
Flexbox
Con flexbox es una sola declaración:
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>
Los prefijos pueden ser necesarios para navegadores más antiguos, consulte soporte para navegadores.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-19 12:09:45
Este es un problema común que muchos han encontrado, pero afortunadamente algunas mentes inteligentes como Ed Eliot en su blog han publicado sus soluciones en línea.
Básicamente lo que haces es hacer que ambas divs/columnas sean muy altas agregando un padding-bottom: 100%
y luego "engañar al navegador" para que piense que no son tan altas usando margin-bottom: -100%
. Es mejor explicado por Ed Eliot en su blog, que también incluye muchos ejemplos.
.container {
overflow: hidden;
}
.column {
float: left;
margin: 20px;
background-color: grey;
padding-bottom: 100%;
margin-bottom: -100%;
}
<div class="container">
<div class="column">
Some content!<br>
Some content!<br>
Some content!<br>
Some content!<br>
Some content!<br>
</div>
<div class="column">
Something
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-14 13:44:58
Este es un área en la que CSS nunca ha tenido realmente ninguna solución - se reduce a usar etiquetas <table>
(o falsificarlas usando los valores CSS display:table*
), ya que ese es el único lugar donde se implementó un "mantener un montón de elementos de la misma altura".
<div style="display: table-row;">
<div style="border:1px solid #cccccc; display: table-cell;">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; display: table-cell;">
Some content!
</div>
</div>
Esto funciona en todas las versiones de Firefox, Chrome y Safari, Opera desde al menos la versión 8, y en IE desde la versión 8.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-23 15:01:38
Usando Javascript
Usando jQuery puedes hacerlo en un script súper simple de una línea.
// HTML
<div id="columnOne">
</div>
<div id="columnTwo">
</div>
// Javascript
$("#columnTwo").height($("#columnOne").height());
Usando CSS
Esto es un poco más interesante. La técnica se llama Faux Columns. Más o menos no se establece la altura real para que sea la misma, pero se montan algunos elementos gráficos para que se vean con la misma altura.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-30 12:56:49
Me sorprende que nadie haya mencionado la técnica de Columnas Absolutas (muy antigua pero confiable) : http://24ways.org/2008/absolute-columns /
En mi opinión, es muy superior tanto a las Columnas Falsas como a la técnica de Un Diseño Verdadero.
La idea general es que un elemento con position: absolute;
se posicionará contra el elemento padre más cercano que tenga position: relative;
. A continuación, estirar una columna para llenar 100% altura asignando tanto un top: 0px;
y bottom: 0px;
(o lo que píxeles / porcentajes que realmente necesito.) Aquí hay un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
#container
{
position: relative;
}
#left-column
{
width: 50%;
background-color: pink;
}
#right-column
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 50%;
background-color: teal;
}
</style>
</head>
<body>
<div id="container">
<div id="left-column">
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>
<div id="right-column">
Lorem ipsum
</div>
</div>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-06 02:21:06
Puede usar el complemento de Alturas iguales de Jquery para lograr, este complemento hace que todo el div sea exactamente de la misma altura que el otro. Si uno de ellos crece y otro también crecerá.
Aquí una muestra de implementación
Usage: $(object).equalHeights([minHeight], [maxHeight]);
Example 1: $(".cols").equalHeights();
Sets all columns to the same height.
Example 2: $(".cols").equalHeights(400);
Sets all cols to at least 400px tall.
Example 3: $(".cols").equalHeights(100,300);
Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.
Aquí está el enlace
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-06-08 14:03:25
Puedes usar Columnas falsas.
Básicamente utiliza una imagen de fondo en un DIV que contiene para simular los dos DIVs de igual altura. El uso de esta técnica también le permite agregar sombras, esquinas redondeadas, bordes personalizados u otros patrones funky a sus contenedores.
Solo funciona con cajas de ancho fijo.
Bien probado y funcionando correctamente en todos los navegadores.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-07 12:14:38
Acabo de ver este hilo mientras buscaba esta misma respuesta. Acabo de hacer una pequeña función de jQuery, espero que esto ayude, funciona como un encanto:
JAVASCRIPT
var maxHeight = 0;
$('.inner').each(function() {
maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});
HTML
<div class="lhs_content">
<div class="inner">
Content in here
</div>
</div>
<div class="rhs_content">
<div class="inner">
More content in here
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-05 15:34:53
Esta pregunta se hizo hace 6 años, pero todavía vale la pena dar una respuesta simple con flexbox layout hoy en día.
Simplemente agregue el siguiente CSS al padre <div>
, funcionará.
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
Las dos primeras líneas declaran que se mostrará como flexbox. Y flex-direction: row
le dice a los navegadores que sus hijos se mostrarán en columnas. Y align-items: stretch
cumplirá con el requisito de que todos los elementos hijos se estirarán a la misma altura si uno de ellos se vuelve más alto.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-17 08:34:59
Si no te importa que uno de los div
sea un maestro y dicte la altura para ambos div
hay esto:
Fiddle
No importa qué, el div
a la derecha se expandirá o aplastará y desbordará para que coincida con la altura del div
a la izquierda.
Ambos div
deben ser hijos inmediatos de un contenedor, y deben especificar sus anchuras dentro de él.
CSS relevante:
.container {
background-color: gray;
display: table;
width: 70%;
position:relative;
}
.container .left{
background-color: tomato;
width: 35%;
}
.container .right{
position:absolute;
top:0px;
left:35%;
background-color: orange;
width: 65%;
height:100%;
overflow-y: auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-23 06:27:32
Me gusta usar pseudo elements
para lograr esto. Puede usarlo como fondo del contenido y dejar que llenen el espacio.
Con este enfoque puede establecer márgenes entre columnas, bordes, etc.
.wrapper{
position: relative;
width: 200px;
}
.wrapper:before,
.wrapper:after{
content: "";
display: block;
height: 100%;
width: 40%;
border: 2px solid blue;
position: absolute;
top: 0;
}
.wrapper:before{
left: 0;
background-color: red;
}
.wrapper:after{
right: 0;
background-color: green;
}
.div1, .div2{
width: 40%;
display: inline-block;
position: relative;
z-index: 1;
}
.div1{
margin-right: 20%;
}
<div class="wrapper">
<div class="div1">Content Content Content Content Content Content Content Content Content
</div><div class="div2">Other</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-15 10:40:21
La forma de cuadrícula CSS
La forma moderna de hacer esto (que también evita tener que declarar un <div class="row"></div>
-wrapper alrededor de cada dos elementos) sería hacer uso de una cuadrícula CSS. Esto también le brinda un control fácil sobre los espacios entre las filas/columnas de sus elementos.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.grid-item {
background-color: #f8f8f8;
box-shadow: 0 0 3px #666;
text-align: center;
}
.grid-item img {
max-width: 100%;
}
<div class="grid-container">
<div class="grid-item">1 <br />1.1<br />1.1.1</div>
<div class="grid-item">2</div>
<div class="grid-item">3
<img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
3.1
</div>
<div class="grid-item">4</div>
<div class="grid-item">5 <br />1.1<br />1.1.1</div>
<div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
6.1</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9 <br />1.1<br />1.1.1</div>
<div class="grid-item">10</div>
<div class="grid-item">11
<img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
11.1
</div>
<div class="grid-item">12</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-29 14:29:29
Puede usar jQuery para lograr esto fácilmente.
CSS
.left, .right {border:1px solid #cccccc;}
[3]} jQuery
$(document).ready(function() {
var leftHeight = $('.left').height();
$('.right').css({'height':leftHeight});
});
HTML
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet.</p>
</div>
Tendrás que incluir jQuery
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-06-08 14:14:03
El Violín
HTML
<div class="container">
<div class="left-column">
</div>
<div class="right-column">
<h1>Hello Kitty!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
</div>
</div>
CSS
.container {
float: left;
width: 100%;
background-color: black;
position: relative;
left: 0;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.left-column {
float: left;
width: 30%;
height: 100%;
position: absolute;
background: wheat;
}
.right-column {
float: right;
width: 70%;
position: relative;
padding: 0;
margin: 0;
background: rebeccapurple;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-30 15:18:26
Sé que ha pasado mucho tiempo, pero comparto mi solución de todos modos. Este es un truco de jQuery.
- - - HTML
<div class="custom-column">
<div class="column-left">
asd
asd<br/>
asd<br/>
</div>
<div class="column-right">
asd
</div>
</div>
<div class="custom-column">
<div class="column-left">
asd
</div>
<div class="column-right">
asd
asd<br/>
asd<br/>
</div>
</div>
---- CSS
<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
.column-left { float:left; width:25%; background:#CCC; }
.column-right { float:right; width:75%; background:#EEE; }
</style>
- - - JQUERY
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$balancer = function() {
$('.custom-column').each(function(){
if($('.column-left',this).height()>$('.column-right',this).height()){
$('.column-right',this).height($('.column-left',this).height())
} else {
$('.column-left',this).height($('.column-right',this).height())
}
});
}
$balancer();
$(window).load($balancer());
$(window).resize($balancer());
});
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-17 13:47:43
Este es un plugin de jQuery que establece la misma altura para todos los elementos en la misma fila(comprobando el desplazamiento del elemento.superior). Así que si su matriz jQuery contiene elementos de más de una fila (desplazamiento diferente.superior), cada fila tendrá una altura separada, basada en el elemento con altura máxima en esa fila.
jQuery.fn.setEqualHeight = function(){
var $elements = [], max_height = [];
jQuery(this).css( 'min-height', 0 );
// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){
var offset_top = jQuery(el).offset().top;
var el_height = jQuery(el).css('height');
if( typeof $elements[offset_top] == "undefined" ){
$elements[offset_top] = jQuery();
max_height[offset_top] = 0;
}
$elements[offset_top] = $elements[offset_top].add( jQuery(el) );
if( parseInt(el_height) > parseInt(max_height[offset_top]) )
max_height[offset_top] = el_height;
});
// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){
if( jQuery($elements[offset_top]).length > 1 )
jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );
}
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-31 07:55:41
var numexcute = 0;
var interval;
$(document).bind('click', function () {
interval = setInterval(function () {
if (numexcute >= 20) {
clearInterval(interval);
numexcute = 0;
}
$('#leftpane').css('height', 'auto');
$('#rightpane').css('height', 'auto');
if ($('#leftpane').height() < $('#rightpane').height())
$('#leftpane').height($('#rightpane').height());
if ($('#leftpane').height() > $('#rightpane').height())
$('#rightpane').height($('#leftpane').height());
numexcute++;
}, 10);
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-05 22:05:26
Estaba teniendo el mismo problema, así que creé esta pequeña función usando jquery ya que jquery es parte de todas las aplicaciones web hoy en día.
function fEqualizeHeight(sSelector) {
var sObjects = $(sSelector);
var iCount = sObjects.length;
var iHeights = [];
if (iCount > 0) {
$(sObjects).each(function () {
var sHeight = $(this).css('height');
var iHeight = parseInt(sHeight.replace(/px/i,''));
iHeights.push(iHeight);
});
iHeights.sort(function (a, b) {
return a - b
});
var iMaxHeight = iHeights.pop();
$(sSelector).each(function () {
$(this).css({
'height': iMaxHeight + 'px'
});
});
}
}
Puede llamar a esta función en el evento page ready
$(document).ready(function(){
fEqualizeHeight('.columns');
});
Espero que esto funcione para usted.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-21 16:18:09
Recientemente me encontré con esto y realmente no me gustaron las soluciones, así que intenté experimentar.
.mydivclass {inline-block; vertical-align: middle; width: 33%;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-27 03:19:08
<div>
<div style="border:1px solid #cccccc; float:left; min-height:200px;">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; min-height:200px;">
Some content!
</div>
</div>
Lo que hice aquí es cambiar la altura a min-height y darle un valor fijo. si uno de ellos está siendo redimensionado, el otro permanecerá a la misma altura. no estoy seguro si esto es lo que quieres
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-06-08 13:53:35