Faça com que o div externo tenha automaticamente a mesma altura de seu conteúdo flutuante

94

Eu quero o exterior div, que é preto, para envolver seus divs flutuantes dentro dele. Não quero usar style='height: 200pxno divcom o outerdivid, pois quero que seja automaticamente a altura de seu conteúdo (por exemplo, os flutuantes div).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

Como fazer isso?

css html css-float Jase Whatson
fonte

Respostas:

167

Você pode definir o outerdivCSS de para este

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

Você também pode fazer isso adicionando um elemento no final com clear: both. Isso pode ser adicionado normalmente, com JS (não é uma boa solução) ou com :afterpseudoelemento CSS (não amplamente suportado em IEs mais antigos).

O problema é que os contêineres não se expandem naturalmente para incluir filhos flutuantes. Esteja avisado ao usar o primeiro exemplo, se você tiver quaisquer elementos filhos fora do elemento pai, eles serão ocultados. Você também pode usar 'auto' como o valor da propriedade, mas isso invocará barras de rolagem se algum elemento aparecer fora.

Você também pode tentar flutuar o contêiner pai, mas dependendo do seu projeto, isso pode ser impossível / difícil.

alex
fonte
37
Eu gostaria de ter entendido a lógica de por que estouro: obras ocultas neste caso.
masteroleary
2
Sim, eu esperava que não fosse só eu que pensasse que isso era contra-intuitivo. alex?
sessão regular de
3
@masteroleary @regularmike HTML/CSSnunca foi uma boa tecnologia de IU, então coisas contra-intuitivas são bastante comuns :)
Yuriy Nakonechnyy
2
@masteroleary Sei que este é um tópico antigo, mas recentemente tentei responder a uma pergunta semelhante em stackoverflow.com/questions/21041297#21041625 - espero que ajude
xec
1
1 para a floatsolução. Funciona muito bem com as outras falhas, especialmente quando emparelhado com o Twitter Bootstrap.
Fizzix
17

Em primeiro lugar, eu recomendo fortemente que você faça seu estilo CSS em um arquivo CSS externo, ao invés de fazê-lo embutido. É muito mais fácil de manter e pode ser mais reutilizável usando classes.

Resolvendo a resposta de Alex (e clearfix de Garret) de "adicionar um elemento no final com clear: both", você pode fazer assim:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

Isso funciona (mas como você pode ver, CSS inline não é tão bonito).

Lycana
fonte
Por que fui classificado como inferior? Funciona, e eu reconheci com razão que não era uma solução bonita.
Lycana
1
Não tenho certeza, marquei com +1 para voltar a 0, pelo menos. Talvez você tenha sido rejeitado porque não corrigiu o CSS incorreto dele ... ou seja, usar o sinal de igual para definir uma propriedade CSS é incorreto.
alex
justo. Agradeço o +1 alex. Achei que era a minha declaração justa.
Lycana
Esta solução é melhor IMO. Eu teria aceitado essa resposta se fosse minha pergunta.
ksg91
8

Você pode querer tentar flutuadores de fechamento automático, conforme detalhado em http://www.sitepoint.com/simple-clearing-of-floats/

Então, talvez tente overflow: auto(geralmente funciona) ou overflow: hidden, como disse o alex.

DarkWulf
fonte
trabalhos ocultos, mas você está certo, o automático funciona um pouco melhor. Obrigado.
Matt Setter
7

Eu sei que algumas pessoas vão me odiar, mas eu descobri display:table-cell para ajudar nesses casos.

É muito mais limpo.

Nande
fonte
div externo usar exibição: tabela; e dentro de div use display: table-cell;
Anukul Limpanasil
4

Em primeiro lugar, você não deve usar width=300pxessa configuração de atributo para a tag, não CSS, use width: 300px;.

Eu sugeriria aplicar a clearfixtécnica no #outerdiv. Clearfix é uma solução geral para limpar 2 divs flutuantes para que o div pai se expanda para acomodar os 2 divs flutuantes.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

Aqui está um exemplo de sua situação e o que Clearfix faz para resolvê-la.

Garrett
fonte
3

Use jQuery:

Definir altura pai = offsetHeight filho.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}
Harpal
fonte
3
Exagero, quando você pode fazer isso apenas com CSS.
alex
1
Com a minha resposta, você pode definir a altura do pai igual à altura do filho, mas usando o overflow não estamos alterando a altura do pai, o que criará algum problema se estivermos exibindo dados após o div pai.
Harpal
1

Usar clear: both;

Passei mais de uma semana tentando descobrir isso!

Ronan
fonte