tenga - HTML/CSS: hacer dos divs flotantes de la misma altura
hacer que un div tenga el mismo tamaño que otro (12)
Tengo un pequeño problema peculiar que actualmente resuelvo usando una table , ver abajo. Básicamente, quiero tener dos divs que ocupen el 100% del ancho disponible, pero solo ocupan tanto espacio vertical como sea necesario (lo cual no es tan obvio de la imagen). Los dos deben tener en todo momento exactamente la misma altura con una pequeña línea entre ellos, como se muestra.
texto alternativo http://pici.se/pictures/qJRMtoLPv.png
Esto es muy fácil de hacer con la table , que actualmente estoy haciendo. Sin embargo, no estoy muy interesado en la solución, ya que semánticamente esto no es realmente una tabla.
Al usar Javascript, puede hacer que las dos etiquetas div tengan la misma altura. El div más pequeño se ajustará para tener la misma altura que la etiqueta div más alta usando el código que se muestra a continuación:
var rightHeight = document.getElementById(''right'').clientHeight;
var leftHeight = document.getElementById(''left'').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById(''right'').style.height=leftHeight+''px'';
} else {
document.getElementById(''left'').style.height=rightHeight+''px'';
}
Con "izquierda" y "derecha" son las identificaciones de las etiquetas div.
Al usar la propiedad css -> display: table-cell
div {
border: 1px solid #000;
margin: 5px;
padding: 4px;
display:table-cell;
width:25% ;position:relative;
}
body{display:table;
border-collapse:separate;
border-spacing:5px 5px}
<div>
This is my div one This is my div one This is my div one
</div>
<div>
This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>
Deberías usar flexbox para lograr esto. No es compatible con IE8 e IE9 y solo con el prefijo -ms en IE10, pero todos los demás navegadores lo admiten. Para prefijos de proveedor, también debe usar autoprefixer .
.parent {
display: flex;
flex-wrap: wrap; // allow wrapping items
}
.child {
flex-grow: 1;
flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}
Es el año 2012 + n, por lo que si ya no se preocupa por IE6 / 7, display:table , display:table-row y display:table-cell trabajo de display:table-cell en todos los navegadores modernos:
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
Actualización 2016-06-17: Si crees que ha llegado el momento de la display:flex , echa un vistazo a Flexbox Froggy .
Este es un problema clásico en CSS. Realmente no hay una solución para esto.
Este artículo de A List Apart es una buena lectura sobre este problema. Utiliza una técnica llamada "columnas falsas", basada en tener una imagen de fondo en mosaico vertical en el elemento que contiene las columnas que crea la ilusión de columnas de igual longitud. Como está en el contenedor de los elementos flotantes, es tan largo como el elemento más largo.
Los editores de A List Apart tienen esta nota en el artículo:
Una nota de los editores: si bien es excelente para su época, este artículo puede no reflejar las mejores prácticas modernas.
La técnica requiere diseños de ancho completamente estáticos que no funcionan bien con los diseños de líquidos y las técnicas de diseño receptivo que son populares hoy en día para los sitios de varios dispositivos. Para sitios de ancho estático, sin embargo, es una opción confiable.
Esto funciona para mí en IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).
También funciona en IE 6 si descomenta el div más claro en la parte inferior. Editar : como dijo Natalie Downe, simplemente puede agregar width: 100%; a #container en #container lugar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#container {
overflow: hidden;
border: 1px solid black;
background-color: red;
}
#left-col {
float: left;
width: 50%;
background-color: white;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
}
</style>
</head>
<body>
<div id=''container''>
<div id=''left-col''>
Test content<br />
longer
</div>
<div id=''right-col''>
Test content
</div>
<!--div style=''clear: both;''></div-->
</div>
</body>
</html>
No conozco una forma de CSS para centrar verticalmente el texto en el div derecho si el div no es de altura fija. Si es así, puede establecer la line-height la line-height en el mismo valor que la altura del div y colocar un div interno que contenga su texto con display: inline; line-height: 110% display: inline; line-height: 110% .
Hasta donde yo sé, no puedes hacer esto usando las implementaciones actuales de CSS. Para hacer dos columnas, con la misma altura ed, necesitas JS.
Puede obtener columnas de altura igual en CSS aplicando un margen inferior de una gran cantidad, un margen negativo inferior de la misma cantidad y rodeando las columnas con un div que tiene desbordamiento oculto. Centrar verticalmente el texto es un poco más complicado, pero esto debería ayudarte en el camino.
#container {
overflow: hidden;
width: 100%;
}
#left-col {
float: left;
width: 50%;
background-color: orange;
padding-bottom: 500em;
margin-bottom: -500em;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
border-left: 1px solid black;
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
<div id="container">
<div id="left-col">
<p>Test content</p>
<p>longer</p>
</div>
<div id="right-col">
<p>Test content</p>
</div>
</div>
</body>
Creo que vale la pena mencionar eso la respuesta anterior de streetpc tiene un html no válido, el doctype es XHTML y hay comillas simples alrededor de los atributos. También vale la pena señalar es que no necesita un elemento adicional con el clear para limpiar los flotadores internos del contenedor. Si utiliza el desbordamiento oculto, esto borra los flotadores en todos los navegadores que no sean IE y luego solo agrega algo para dar hasLayout, como ancho o zoom: 1 hará que IE borre sus flotantes internos.
He probado esto en todos los navegadores modernos FF3 + Opera9 + Chrome Safari 3+ e IE6 / 7/8. Puede parecer un truco feo pero funciona bien y lo uso mucho en producción.
Espero que esto ayude.
Tuve un problema similar y, en mi opinión, la mejor opción es usar solo un poco de javascript o jquery.
Puedes conseguir que los divs deseados tengan la misma altura obteniendo el mayor valor de div y aplicando ese valor a todos los demás divs. Si tienes muchos divs y muchas soluciones, sugiero que escribas un poco de código js avanzado para descubrir cuál de todos los divs es el más alto y luego usar su valor.
Con jquery y 2 divs es muy simple, aquí está el código de ejemplo:
$(''.smaller-div'').css(''height'',$(''.higher-div'').css(''height''));
Y para el final, hay una última cosa. ¡Su relleno (superior e inferior) debe ser el mismo! Si uno tiene un relleno más grande, necesita eliminar la diferencia de relleno.
Usando JS, use data-same-height="group_name" en todos los elementos que desee para tener la misma altura .
El ejemplo: https://jsfiddle.net/eoom2b82/
El código:
$(document).ready(function() {
var equalize = function () {
var disableOnMaxWidth = 0; // 767 for bootstrap
var grouped = {};
var elements = $(''*[data-same-height]'');
elements.each(function () {
var el = $(this);
var id = el.attr(''data-same-height'');
if (!grouped[id]) {
grouped[id] = [];
}
grouped[id].push(el);
});
$.each(grouped, function (key) {
var elements = $(''*[data-same-height="'' + key + ''"]'');
elements.css(''height'', '''');
var winWidth = $(window).width();
if (winWidth <= disableOnMaxWidth) {
return;
}
var maxHeight = 0;
elements.each(function () {
var eleq = $(this);
maxHeight = Math.max(eleq.height(), maxHeight);
});
elements.css(''height'', maxHeight + "px");
});
};
var timeout = null;
$(window).resize(function () {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(equalize, 250);
});
equalize();
});
puedes hacer que esto funcione con js:
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
div {
border: 1px solid #000;
margin: 5px;
padding: 4px;
display:table-cell;
width:25% ;position:relative;
}
body{display:table;
border-collapse:separate;
border-spacing:5px 5px}
<div>
This is my div one This is my div one This is my div one
</div>
<div>
This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>