html - posicionamiento - posicionar div css
¿Cómo podría forzar una DIV flotante para que coincida con la altura de otra DIV flotante? (11)
Debes envolverlos en un div sin flotador.
<div style="float:none;background:#FDD017;" class="clearfix">
<div id="response" style="float:left; width:65%;">Response with two lines</div>
<div id="note" style="float:left; width:35%;">single line note</div>
</div>
También uso el parche clearfix aquí clearfix
Mi código HTML simplemente divide las páginas en dos columnas, 65%, 35% respectivamente.
<div style="float : left; width :65%; height:auto;background-color:#FDD017;">
<div id="response">
</div>
</div>
<div style="float : left; width :35%;height:auto; background-color:#FDD017;">
<div id="note">
</div>
</div>
En el div response , tengo datos variables; en la note div , he arreglado datos. Aunque los dos div tienen dos conjuntos de datos diferentes, necesito que se muestren con la misma altura para que los colores de fondo aparezcan para llenar un cuadro que contenga ambos. Naturalmente, el problema es la div response , ya que su altura varía según la cantidad de datos que se muestran actualmente dentro de ella.
¿Cómo puedo asegurarme de que la altura de las dos columnas sea siempre igual?
Envuélvalos en un div que contenga el color de fondo aplicado y tenga un div de compensación después de las "columnas".
<div style="background-color: yellow;">
<div style="float: left;width: 65%;">column a</div>
<div style="float: right;width: 35%;">column b</div>
<div style="clear: both;"></div>
</div>
Actualizado para abordar algunos comentarios y mis propios pensamientos:
Este método funciona porque es esencialmente una simplificación de su problema, en este método un tanto ''oldskool'' puse dos columnas seguidas de un elemento de compensación vacío, el trabajo del elemento de limpieza es decirle al padre (con el fondo) aquí es donde el comportamiento de flotación finaliza, esto permite que el padre esencialmente represente 0 píxeles de altura en la posición del claro, que será el elemento flotando más alto anteriormente.
La razón para esto es garantizar que el elemento principal sea tan alto como la columna más alta, el fondo se establece en el elemento principal para dar la apariencia de que ambas columnas tienen la misma altura.
Cabe señalar que esta técnica es ''oldskool'' porque la mejor opción es activar este comportamiento de cálculo de altura con algo como clearfix o simplemente tener overflow: oculto en el elemento principal.
Si bien esto funciona en este escenario limitado, si desea que cada columna se vea visualmente diferente, o tenga un espacio vacío entre ellas, entonces establecer un fondo en el elemento principal no funcionará; sin embargo, hay un truco para obtener este efecto.
El truco es agregar relleno de fondo a todas las columnas, a la cantidad máxima de tamaño que esperas que podría ser la diferencia entre la columna más corta y más alta, si no puedes resolver esto, elige una figura grande, luego debes agregar un margen inferior negativo del mismo número.
Necesitará un desbordamiento oculto en el objeto principal, pero el resultado será que cada columna solicitará que se visualice esta altura adicional sugerida por el margen, pero no solicitará el diseño de ese tamaño (porque el margen negativo contrarresta el cálculo).
Esto hará que el elemento principal tenga el tamaño de la columna más alta, mientras permite que todas las columnas se rendericen a su altura + el tamaño del relleno inferior utilizado, si esta altura es mayor que la del elemento primario, el resto simplemente se recortará.
<div style="overflow: hidden;">
<div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
<div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>
Puede ver un ejemplo de esta técnica en el sitio web bowers y wilkins (vea las cuatro imágenes horizontales de los focos en la parte inferior de la página).
Este código le permitirá tener un número variable de filas (con un número variable de DIV en cada fila) y hará que todos los DIV en cada fila coincidan con la altura de su vecino más alto:
Si asumimos que todos los DIV, que están flotando, están dentro de un contenedor con el id "divContainer", entonces podría usar lo siguiente:
$(document).ready(function() {
var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();
$(''div#divContainer div'').each(function(index) {
if(currentRowStart != $(this).position().top) {
// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = $(this).position().top;
currentTallest = $(this).height();
rowDivs.push($(this));
} else {
// another div on the current row. Add it to the list and check if it''s taller
rowDivs.push($(this));
currentTallest = (currentTallest < $(this).height()) ? ($(this).height()) : (currentTallest);
}
// do the last row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);
});
});
Flex hace esto por defecto.
<div id="flex">
<div id="response">
</div>
<div id="note">
</div>
</div>
CSS:
#flex{display:flex}
#response{width:65%}
#note{width:35%}
https://jsfiddle.net/784pnojq/1/
BONO: múltiples filas
Habiendo tenido también el mismo tipo de problema, requiriendo tres divs uno junto al otro con contenido diferente, con bordes derechos para ''separarlos'', la única solución que funcionó fue una versión ligeramente modificada de la opción jQuery en otra respuesta. Recuerde que también necesita el script que se encuentra here .
Debajo está mi versión ligeramente modificada del guión, que solo permite una verdadera configuración de altura mínima (ya que necesitaba que mis cajas tuvieran al menos cierta altura).
/*--------------------------------------------------------------------
* JQuery Plugin: "EqualHeights"
* by: Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
*
* Copyright (c) 2008 Filament Group
* Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
*
* Description: Compares the heights or widths of the top-level children of a provided element
and sets their min-height to the tallest height (or width to widest width). Sets in em units
by default if pxToEm() method is available.
* Dependencies: jQuery library, pxToEm method (article:
http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
* Usage Example: $(element).equalHeights();
Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
Optional: to specify an actual min-height (in px), pass an integer value, regardless of previous parameter: $(element).equalHeights(false,150);
* Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/
$.fn.equalHeights = function(px,minheightval) {
$(this).each(function(){
if (minheightval != undefined) {
var currentTallest = minheightval;
}
else {
var currentTallest = 0;
}
$(this).children().each(function(i){
if ($(this).height() > currentTallest) {
currentTallest = $(this).height();
}
});
if (!px || !Number.prototype.pxToEm)
currentTallest = currentTallest.pxToEm(); //Use ems unless px is specified.
// For Internet Explorer 6, set height since min-height isn''t supported.
if ($.browser.msie && $.browser.version == 6.0) {
$(this).children().css({''height'': currentTallest});
}
$(this).children().css({''min-height'': currentTallest});
});
return this;
};
Funciona como un encanto y no desacelera nada :)
La solución correcta para este problema es usar display: table-cell
Importante: esta solución no necesita float ya que table-cell ya convierte el div en un elemento que se alinea con los otros en el mismo contenedor. Eso también significa que no tienes que preocuparte por despejar carrozas, desbordamientos, trasfondo y todas las demás sorpresas desagradables que el hack float trae a la fiesta.
CSS:
.container {
display: table;
}
.column {
display: table-cell;
width: 100px;
}
HTML:
<div class="container">
<div class="column">Column 1.</div>
<div class="column">Column 2 is a bit longer.</div>
<div class="column">Column 3 is longer with lots of text in it.</div>
</div>
Relacionado:
No puedo entender por qué este problema se golpea en el suelo cuando en 30 segundos puede codificar una tabla de dos columnas y resolver el problema.
Este problema de altura de la columna div aparece en un diseño típico. ¿Por qué recurrir a las secuencias de comandos cuando lo hace una simple etiqueta HTML básica antigua? A menos que haya enormes y numerosas tablas en un diseño, no creo que las tablas sean significativamente más lentas.
Si intenta forzar un div flotante para que coincida con otro para crear un efecto de columna, esto es lo que hago. Me gusta porque es simple y limpio.
<div style="background-color: #CCC; width:300px; overflow:hidden; ">
<!-- Padding-Bottom is equal to 100% of the container''s size, Margin-bottom hides everything beyond
the container equal to the container size. This allows the column to grow with the largest
column. -->
<div style="float: left;width: 100px; background:yellow; padding-bottom:100%; margin-bottom:-100%;">column a</div>
<div style="float: left;width: 100px; background:#09F;">column b<br />Line 2<br />Line 3<br />Line 4<br />Line 5</div>
<div style="float:left; width:100px; background: yellow; padding-bottom:100%; margin-bottom:-100%;">Column C</div>
<div style="clear: both;"></div>
</div>
Creo que esto tiene sentido. Parece funcionar bien incluso con contenido dinámico.
Siempre puedes usar una imagen de fondo para hacerlo también. Tiendo a votar por esta opción el 100% del tiempo, ya que la única otra solución perfecta es la opción de Jquery.
Al igual que con el uso del div externo con un color de fondo, terminará teniendo que tener el contenido en ambos divs alcanzando la misma altura.
Te recomiendo que los envuelvas ambos en un div externo con el color de fondo deseado.
Aquí hay un plugin jQuery para establecer las alturas de varios div para que sean iguales. Y a continuación está el código real del complemento.
$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
});
if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
// for ie6, set height since min-height isn''t supported
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({''height'': currentTallest}); }
$(this).children().css({''min-height'': currentTallest});
});
return this;
};