html - ejemplos - ajuste automáticamente la altura del contenedor<DIV> para acomodar al niño<DIV> en posición absoluta

layout html ejemplos

Question

¿Hay alguna forma de ajustar automáticamente la altura de DIV del contenedor para acomodar los DIV de niños en posición absoluta? Me gustaría obtener algo como

+-----------------------+ | container | | +------+ +------+ | | | chld | | chld | | | | 1 | | 2 | | | | | | | | | +------+ +------+ | | +------+ | | | chld | | | | 3 | | | | | | | +------+ | +-----------------------+

Intento algo como:

<div class="container" style="position: relative; border: solid thin">
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 5px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 30px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 15px; top: 30px;
                             border: dashed thin;"></div>
</div>

pero el div "contenedor" se mantiene a una altura cero. Entiendo que este podría ser el comportamiento esperado, ya que los elementos se "eliminan" del flujo cuando se posicionan de manera absoluta, pero ¿hay alguna solución para esto? (a excepción de precalcular la altura resultante y configurarla manualmente)

Answer 1

desbordamiento: automático

Este es el nuevo método de clearfix , FYI. Sin embargo, no siempre expande el contenedor a la altura de su hijo más alto y absolutamente posicionado .

Answer 2

Me ha costado mucho conseguir esto y ahora que tengo una solución parece que hubiera sido tan simple, de todos modos, se necesita algo de jQuery / Javascript:

jQuery(window).load(function(){
    var valueCheck = [];
    jQuery(''.projectsWrap .hentry'').each(function(){
        var itemObj = jQuery(this);
        var itemValues = itemObj.position();
        var top = itemValues.top;
        var height = jQuery(this).height();
        var sum = top + height;
        valueCheck.push(sum);
    });
    var res = Math.max.apply(Math, valueCheck);
    jQuery(''.projectsWrap'').height(res);
});

Escribí e implementé esta pequeña secuencia de comandos en un tema de WordPress, por lo tanto, ves que los "$" se convierten en "jQuery" para compatibilidad, pero si no estás usando WordPress deberías volverlos a "$".

La situación en la que me encontraba era incluso más difícil que la de la pregunta porque el usuario quería posicionar de forma autónoma cada elemento en el contenedor y el orden en el que aparecían los elementos en el dom no estaba relacionado con su posición en el contenedor: totalmente unexpectable resultados (el primer elemento en el dom puede aparecer como el último elemento inferior en la ventana, por ejemplo).

También las alturas de los elementos eran todas diferentes, todas las alturas diferentes y todos los valores superiores diferentes (desplazamiento), una pesadilla.

Lo que hace la secuencia de comandos es obtener la altura y el valor superior de cada elemento, sumarlos y poner esta suma en una matriz, la matriz se verifica para encontrar el valor más grande, este valor es la altura en la que se configurará el contenedor, ¡magia!

Answer 3

No pude encontrar ninguna solución simple de javascript puro para este pequeño problema, así que aquí viene (necesitas agregar campos de id a tu código html):

var containerBox = document.getElementById(''container'');
var statBoxBottom = document.getElementById(''chld3'').getBoundingClientRect().bottom + window.scrollY;
var mainDivBottom = containerBox.getBoundingClientRect().bottom + window.scrollY;
var boxHeightDiff = statBoxBottom - mainDivBottom;
if (boxHeightDiff > 0) 
    containerBox.style.height = Math.ceil( containerBox.offsetHeight + boxHeightDiff ) + ''px'';

Básicamente, aumenta la altura del "contenedor" en función de la posición inferior absoluta de "chld3".

Answer 4

No. La idea general es que el elemento absolutamente posicionado no influye en el diseño principal.

Intente lograr su objetivo colocando flotadores de forma relativa en lugar de posicionamiento absoluto de divs. No es tan conveniente (debido a la posición inicial de tus flotadores no es el 0,0), pero funcionará.

Answer 5

Si le da al .container div una altura del 100%, debería calcularlo a partir de los elementos secundarios en la mayoría de los navegadores, pero desafortunadamente no en IE6 o inferior.

Answer 6

Si usa position: relative en lugar de position absolute, un espacio vacío permanecerá en la estructura de la página donde debería estar el elemento, y este espacio será el alto del elemento que ha movido.

Por lo tanto, puede hacer flotar a chld1 y chld2 para colocarlos uno al lado del otro, agregar un relleno superior e inferior para empujar al chld 3 hacia abajo y usar la posición relativa para separarlos y moverlos a cualquier altura. Luego use clear both en chld3.

Algo como

#exp_outer {
  width: 400px;
  border: 1px solid black;
}
#chld1 {
  float: left;
  margin: 30px 0 20px;
  left: 50px
}
#chld2 {
  float: right;
  margin: 30px 0 20px;
  right: 50px;
}
#chld3 {
  left: 150px;
  clear: both;
}
.box {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid black;
}

<div id="exp_outer">
  <div id="chld1" class="box">Child1</div>
  <div id="chld2" class="box">Child2</div>
  <div id="chld3" class="box">Child3</div>
</div>

Answer 7

terminé usando clearfix, esto me permite establecer el ancho deseado del contenedor, y su altura se ajustará automáticamente, dependiendo de los contenidos (esto funciona en todos los navegadores)

<style>
        .inner_box {
            position: relative;
            float: left;
            width: 50px; 
            height: 50px; 
            border: dashed thin;
            margin: 5px 5px 5px;
            text-align: center;
        }

        .outer_box {
            position: relative; 
            top: 200px;
            border: solid thin; 
            width: 190px;
            //height: 1%;
        }

        .outer_box:after {
            content: ''.''; 
            display: block; 
            clear: both; 
            visibility: hidden; 
            height: 0; 
            line-height: 0;
        }
    </style>

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box">2</div>
    <div class="inner_box">3</div>
    <div class="inner_box">4</div>
    <div class="inner_box">5</div>
    <div class="inner_box">6</div>
</div>