html - child - stretch div height to fit parent




Faça a div absoluta posicionada expanda a altura div do pai (10)

Como você pode ver no CSS abaixo, quero que child2 se posicione antes de child1. Isso ocorre porque o site que estou desenvolvendo no momento também deve funcionar em dispositivos móveis, nos quais o filho2 deve estar na parte inferior, pois contém a navegação que eu quero abaixo do conteúdo nos dispositivos móveis. - Por que não 2 masterpages? Este é o único 2 divs que são reposicionados em todo o HTML, então 2 masterpages para esta pequena alteração é um exagero.

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 tem altura dinâmica, pois diferentes subsites podem ter mais ou menos itens de navegação.

Eu sei que os elementos posicionados absolutos são removidos do fluxo, assim ignorados por outros elementos.
Tentei configurar overflow:hidden; no pai div, mas isso não ajudou, nem o clearfix.

Meu último recurso será o javascript para reposicionar as duas divs de acordo, mas por enquanto vou tentar ver se existe uma maneira não-javascript de fazer isso.


"Você usa alturas fixas ou precisa envolver JS."

Aqui está o exemplo JS:

---------- jQuery JS exemplo --------------------

    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);

Com JavaScript puro, você só precisa recuperar a altura do elemento filho de static position .child1 usando o método getComputedStyle() , em seguida, definir esse valor de recuperação como o padding-top para o mesmo filho usando a propriedade HTMLElement.style .

Verifique e execute o seguinte Snippet de código para um exemplo prático do que descrevi acima:

/* JavaScript */

var child1 = document.querySelector(".child1");
var parent = document.getElementById("parent");

var childHeight = parseInt(window.getComputedStyle(child1).height) + "px";
child1.style.paddingTop = childHeight;
/* CSS */

#parent { position: relative; width: 100%; }
.child1 { width: auto; }
.child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
html, body { width: 100%;height: 100%; margin: 0; padding: 0; }
<!-- HTML -->

<div id="parent">
    <div class="child1">STATIC</div>
    <div class="child2">ABSOLUTE</div>
</div>


Embora o alongamento para elementos com position: absolute não seja possível, muitas vezes há soluções em que você pode evitar o posicionamento absoluto enquanto obtém o mesmo efeito. Olhe para este violino que resolve o problema em seu caso particular http://jsfiddle.net/gS9q7/

O truque é inverter a ordem dos elementos, flutuando ambos os elementos, o primeiro para a direita, o segundo para a esquerda, de modo que o segundo apareça primeiro.

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

Finalmente, adicione um clearfix ao pai e pronto (veja o http://jsfiddle.net/gS9q7/ para a solução completa).

Geralmente, desde que o elemento com posição absoluta esteja posicionado na parte superior do elemento pai, é bem provável que você encontre uma solução alternativa flutuando o elemento.


Eu criei outra solução, que eu não amo, mas que faz o trabalho.

Basicamente, duplique os elementos filhos de tal forma que as duplicatas não fiquem visíveis.

<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;
}

Se esses elementos filhos contiverem pouca marcação, o impacto será pequeno.


Existe uma maneira bem simples de resolver isso.

Você só precisa duplicar o conteúdo de child1 e child2 em divs relativas com display: none no div pai. Diga child1_1 e child2_2. Coloque child2_2 na parte superior e child1_1 na parte inferior.

Quando seu jquery (ou o que quer que) chama o div absoluto, apenas ajuste o acordo div relativo (child1_1 ou child2_2) com display: block AND visibility: hidden. O filho relativo ainda será invisível, mas tornará o div dos pais mais alto.


Existe uma maneira melhor de fazer isso agora. Você pode usar a propriedade bottom.

    .my-element {
      position: absolute;
      bottom: 30px;
    }

Isso é muito parecido com o que o @ChrisC sugeriu. Não está usando um elemento posicionado absoluto, mas um relativo. Talvez possa funcionar para você

<div class="container">
  <div class="my-child"></div>
</div>

E seu css assim:

.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;
}

https://jsfiddle.net/royriojas/dndjwa6t/


Tente isso, foi trabalhado para mim

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

Ele irá definir a altura da criança para a altura dos pais


Você respondeu a pergunta por si mesmo: "Eu sei que elementos posicionados de forma absoluta são removidos do fluxo, assim ignorados por outros elementos." Então você não pode definir a altura dos pais de acordo com um elemento absolutamente posicionado.

Você usa alturas fixas ou precisa envolver JS.


está certa, mas você pode contratar um pai / div para expandir para um elemento filho se você inverter seu posicionamento div como este:

.parent{
    postion: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child{
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

Isso deve funcionar para você.





parent-child