html - pantalla - Hacer un div posicionado absoluto para expandir la altura del div principal
posicionar div css (11)
"O utilizas alturas fijas o necesitas involucrar a JS".
Aquí está el ejemplo de JS:
---------- jQuery JS example --------------------
function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();
$(containerSelector).children().each(function (i){
if (maxX < parseInt($(this).css(''left'')) + $(this).width()){
maxX = parseInt($(this).css(''left'')) + $(this).width();
}
if (maxY < parseInt($(this).css(''top'')) + $(this).height()){
maxY = parseInt($(this).css(''top'')) + $(this).height();
}
});
return {
''width'': maxX,
''height'': maxY
}
}
var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
$("#SpecBody").width(specBodySize.width);
$("#SpecBody").height(specBodySize.height);
Como puede ver en el CSS a continuación, quiero que child2 se ubique antes de child1. Esto se debe a que el sitio que estoy desarrollando actualmente también debería funcionar en dispositivos móviles, en los que el elemento secundario2 debería estar en la parte inferior, ya que contiene la navegación que quiero debajo del contenido en los dispositivos móviles. - ¿Por qué no 2 páginas maestras? Esta es la única 2 divs que se reposicionan en todo el HTML, por lo que 2 páginas maestras para este cambio menor es una exageración.
HTML:
<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS:
parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
child2 tiene altura dinámica, ya que diferentes subsitios podrían tener más o menos elementos de navegación.
Sé que los elementos posicionados absolutos se eliminan del flujo, por lo que otros elementos los ignoran.
Intenté configurar el overflow:hidden; en el div principal, pero eso no ayudó, tampoco lo hace el clearfix.
Mi último recurso será javascript para reposicionar los dos divs en consecuencia, pero por ahora voy a tratar de ver si existe una forma que no sea javascript de hacerlo.
Aunque no es posible extender elementos con position: absolute , a menudo hay soluciones en las que puede evitar el posicionamiento absoluto obteniendo el mismo efecto. Mira este violín que resuelve el problema en tu caso particular http://jsfiddle.net/gS9q7/
El truco consiste en invertir el orden de los elementos flotando ambos elementos, el primero a la derecha y el segundo a la izquierda, de modo que el segundo aparece primero.
.child1 {
width: calc(100% - 160px);
float: right;
}
.child2 {
width: 145px;
float: left;
}
Finalmente, agregue un clearfix al padre y listo (vea el http://jsfiddle.net/gS9q7/ para la solución completa).
En general, siempre que el elemento con posición absoluta se ubique en la parte superior del elemento principal, es probable que encuentre una solución flotante.
Considera también el próximo enfoque:
CSS:
.parent {
height: 100%;
}
.parent:after {
content: '''';
display: block;
}
Además, dado que está tratando de cambiar la posición de los divs, considere css grid
Esto es muy similar a lo que sugirió @ChrisC. No está utilizando un elemento de posición absoluta, sino relativo. Tal vez podría funcionar para usted
<div class="container">
<div class="my-child"></div>
</div>
Y tu CSS así:
.container{
background-color: red;
position: relative;
border: 1px solid black;
width: 100%;
}
.my-child{
position: relative;
top: 0;
left: 100%;
height: 100px;
width: 100px;
margin-left: -100px;
background-color: blue;
}
Feela tiene razón, pero puedes hacer que un padre div contraiga / expanda a un elemento hijo si reviertes tu posicionamiento div . Establezca el div principal en la position: absolute; y colóquelo en el navegador usando los atributos left , top y de margin como desee. Luego configure child2 en position: relative; y establezca el atributo de overflow en hidden en caso de que quiera rellenarlo o moverlo usando la left y la top dentro del div principal, establecer la height: 100%; y width: 100% y eso debería funcionar para usted.
Hay una manera bastante simple de resolver esto.
Solo tiene que duplicar el contenido de child1 y child2 en divs relativos con display: none en parent div. Diga child1_1 y child2_2. Coloque child2_2 en la parte superior e child1_1 en la parte inferior.
Cuando su jquery (o lo que sea) llama al div absoluto, simplemente configure el div relativo correspondiente (child1_1 o child2_2) con display: block AND visibility: hidden. El hijo relativo seguirá siendo invisible, pero aumentará el div de los padres.
Hay una mejor manera de hacer esto ahora. Puedes usar la propiedad inferior.
.my-element {
position: absolute;
bottom: 30px;
}
Prueba esto, me funcionó
.child {
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
z-index: 1;
}
Establecerá la altura del niño a la altura de los padres
Se me ocurrió otra solución, que no me encanta pero que hace el trabajo.
Básicamente duplicar los elementos secundarios de tal manera que los duplicados no sean visibles.
<div id="parent">
<div class="width-calc">
<div class="child1"></div>
<div class="child2"></div>
</div>
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS:
.width-calc {
height: 0;
overflow: hidden;
}
Si esos elementos secundarios contienen poco marcado, entonces el impacto será pequeño.
Tuve un problema similar. Para resolver esto (en lugar de calcular la altura del iframe usando el cuerpo, documento o ventana) creé un div que envuelve el contenido de la página completa (un div con un id = "página" por ejemplo) y luego usé su altura.
Usted respondió la pregunta usted mismo: "Sé que los elementos posicionados absolutos se eliminan del flujo, por lo tanto, son ignorados por otros elementos". Por lo tanto, no puede establecer la altura de los padres de acuerdo con un elemento absolutamente posicionado.
Usted usa alturas fijas o necesita involucrar a JS.