Como puede ver en el CSS a continuación, quiero child2
posicionarme antes child1
. Esto se debe a que el sitio que estoy desarrollando actualmente también debería funcionar en dispositivos móviles, en el que child2
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? Estos son los únicos 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.
Traté de configurar overflow:hidden;
el div padre, pero eso no ayudó, tampoco lo hace el clearfix
.
Mi último recurso será JavaScript para reposicionar los dos en divs
consecuencia, pero por ahora intentaré ver si existe una forma de hacerlo que no sea JavaScript.
fuente
Respuestas:
Respondió la pregunta usted mismo: "Sé que los elementos posicionados absolutos se eliminan del flujo, por lo que otros elementos los ignoran". Por lo tanto, no puede establecer la altura de los padres de acuerdo con un elemento posicionado absolutamente.
Usted usa alturas fijas o necesita involucrar a JS.
fuente
Aunque
position: absolute
no es posible estirar a elementos con , a menudo hay soluciones en las que puede evitar el posicionamiento absoluto mientras obtiene el mismo efecto. Mire este violín que resuelve el problema en su caso particular http://jsfiddle.net/gS9q7/El truco consiste en invertir el orden de los elementos flotando ambos elementos, el primero a la derecha, el segundo a la izquierda, de modo que el segundo aparece primero.
Finalmente, agregue un clearfix al padre y listo (vea el violín para la solución completa).
En general, siempre y cuando el elemento con posición absoluta esté posicionado en la parte superior del elemento padre, es muy probable que encuentre una solución flotando el elemento.
fuente
Feeela tiene razón, pero puede hacer que un padre se
div
contraiga / expanda a un elemento hijo si invierte sudiv
posición de esta manera:Esto debería funcionar para ti.
fuente
Hay una forma 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 y child1_1 en la parte inferior.
Cuando su jquery (o lo que sea) llame al div absoluto, solo configure el div relativo relativo (child1_1 o child2_2) con display: block AND visibilidad: oculto. El hijo relativo seguirá siendo invisible, pero aumentará el div de los padres.
fuente
Con JavaScript puro, solo necesita recuperar la altura de su
static position
elemento hijo.child1
utilizando el método getComputedStyle () y luego establecer ese valor de recuperación comopadding-top
para el mismo hijo utilizando la propiedad HTMLElement.style .Verifique y ejecute el siguiente fragmento de código para obtener un ejemplo práctico de lo que describí anteriormente:
fuente
Esta pregunta se hizo en 2012 antes de flexbox. La forma correcta de resolver este problema usando CSS moderno es con una consulta de medios y una inversión de columna flexible para dispositivos móviles. No se necesita posicionamiento absoluto.
https://jsfiddle.net/tnhsaesop/vjftq198/3/
HTML:
CSS:
fuente
Tuve un problema similar. Para resolver esto (en lugar de calcular la altura del iframe usando el cuerpo, el documento o la ventana) creé un div que envuelve todo el contenido de la página (un div con un id = "página" por ejemplo) y luego usé su altura.
fuente
Se me ocurrió otra solución, que no me encanta pero hace el trabajo.
Básicamente duplicar los elementos secundarios de tal manera que los duplicados no sean visibles.
CSS:
Si esos elementos secundarios contienen poco marcado, entonces el impacto será pequeño.
fuente
Aquí está el ejemplo de JS:
---------- Ejemplo de jQuery JS --------------------
fuente
Hay un truco muy simple que soluciona este problema
Aquí hay un codeandbox que ilustra la solución: https://codesandbox.io/s/00w06z1n5l
HTML
CSS
puedes jugar con la posición del hack div para afectar dónde se ubica el niño.
Aquí hay un fragmento:
fuente
Hay una mejor manera de hacer esto ahora. Puedes usar la propiedad inferior.
fuente
Esto es muy similar a lo que sugirió @ChrisC. No está utilizando un elemento posicionado absoluto, sino uno relativo. Tal vez podría funcionar para ti
Y tu CSS como este:
https://jsfiddle.net/royriojas/dndjwa6t/
fuente
Considere también el siguiente enfoque:
CSS:
Además, dado que está intentando reposicionar divs, considere la cuadrícula CSS
fuente
Las vistas absolutas se posicionan frente al antepasado más cercano que no está posicionado estáticamente (
position: static
), por lo tanto, si desea una vista absoluta posicionada contra un padre determinado, establezca el padreposition
enrelative
y el hijoposition
enabsolute
fuente
Intenta esto, me funcionó
Establecerá la altura del niño a la altura del padre
fuente