HTML / CSS: haciendo dos divs flotantes de la misma altura
https://stackoverflow.com/questions/1205159
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo un pequeño problema peculiar que actualmente resuelvo usando una tabla , vea a continuación. Básicamente, quiero que dos divs ocupen el 100% del ancho disponible, pero solo ocupen todo el espacio vertical que sea necesario (lo que no es tan obvio en la imagen). Los dos deben tener en todo momento la misma altura exacta con una pequeña línea entre ellos, como se muestra.
(fuente: pici.se )
Todo esto es muy fácil de hacer usando table , lo que estoy haciendo actualmente. Sin embargo, no estoy muy interesado en la solución, ya que semánticamente no es una tabla.
Solución
Puede obtener columnas de igual altura en CSS aplicando un relleno inferior de una gran cantidad, un margen negativo inferior de la misma cantidad y rodeando las columnas con un div que tiene un 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 que 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 es de destacar que no necesita un elemento adicional con clear activado para borrar los flotadores internos del contenedor. Si usa el desbordamiento oculto, esto borra los flotadores en todos los navegadores que no son IE y luego simplemente agrega algo para proporcionar hasLayout como ancho o zoom: 1 hará que IE borre sus flotadores 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 la producción.
Espero que esto ayude.
Otros consejos
Es el año 2012 + n, así que si ya no te importa IE6 / 7, display: table , display: table-row y display: table-cell funciona en todos los navegadores modernos:
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
Actualización 2016-06-17: Si cree que ha llegado el momento de display: flex , consulte Flexbox Froggy .
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 los prefijos de proveedores, 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.
}
puede 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>
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. Dado que está en el envoltorio de los elementos flotados, 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 por su época, es posible que este artículo no refleje las mejores prácticas modernas.
La técnica requiere diseños de ancho completamente estático que no funcionan bien con los diseños líquidos y las técnicas de diseño de respuesta que son populares hoy en día para los sitios de dispositivos cruzados. Para sitios de ancho estático, sin embargo, es una opción confiable.
Tuve un problema similar y, en mi opinión, la mejor opción es usar solo un poco de javascript o jquery.
Puedes hacer que los divs deseados tengan la misma altura obteniendo el valor de div más alto y aplicando ese valor a todos los demás divs. Si tiene muchos divs y muchas soluciones, le sugiero que escriba un código js poco avanzado para averiguar 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:
$ ('. small-div'). css ('height', $ ('. higher-div'). css ('height'));
Y para el final, hay 1 ú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.
Por lo que sé, no puede hacer esto con las implementaciones actuales de CSS. Para hacer dos columnas, igual altura necesitas JS.
Esto me funciona en IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).
También funciona en IE 6 si descomprime el div más claro en la parte inferior.
Editar : como dijo Natalie Downe, simplemente puedes agregar width: 100%; a #container en su 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 configurar line-height al mismo valor que div height y colocar una división interna que contenga su texto con la visualización de : inline; altura de línea: 110% .
Usando Javascript, puedes hacer que las dos etiquetas div tengan la misma altura. El div más pequeño se ajustará para que tenga la misma altura que la etiqueta div más alta con 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 " siendo el id de las etiquetas div.
Al utilizar 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>
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>
Usando JS, usa data-same-height = " group_name " en todos los elementos que quieras que tengan 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();
});
Necesitaba hacer algo similar, aquí está mi implementación. Para recapitular el propósito, es hacer que 2 elementos ocupen el ancho de un contenedor primario dado, y que la altura sea tan alta como sea necesario. Esencialmente, la altura es igual a la altura máxima de la mayor cantidad de contenido, pero el otro contenedor está al ras.
html
<div id="ven">
<section>some content</section>
<section>some content</section>
</div>
css
#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}
