•  11-09-2019
  •  | 
  •  

Pergunta

Eu tenho três tags div, um invólucro e dois lado a lado dentro do invólucro:

<div id="wrapper">
   <div id="left"></div>
   <div id="right"></div>
</div>

Eu quero criar a condição onde o <div id="left"> A tag é de altura variável, esticando o invólucro.

Como resultado, o <div id="right"> Será que se expandirá para qualquer altura que o invólucro tenha se tornado.

O que o CSS vai conseguir isso? Obrigado!

Foi útil?

Solução

Se você vai com o jQuery, poderá fazer isso.

$(document).ready(function(){
   var leftHt = $('#left').height();
   $('#right').css("height",leftHt);

});

Não é CSS, mas é bem simples e deve funcionar. O CSS simplesmente não seria capaz de fazer isso facilmente, pelo menos meu conhecimento.

Se você ainda não possui a API jQuery, logo acima do JavaScript. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="javascript" language"javascript"></script>

Exemplo de trabalho aqui:

http://michaelpstone.net/development/dynamic-height.html

Outras dicas

Talvez eu esteja atrasado para a festa, mas é realmente simples fazer o que você descreve com CSS puro. O truque é fazer #right absolutamente posicionado e dê um top e bottom de 0. Isso o esticará a qualquer altura #left está dando #wrapper. Aqui está um exemplo completo de trabalho - #left é verde, #right é azul, e #wrapper é vermelho, mas nunca visto porque está completamente coberto por #left e #right. Tente remover o bottom: 0; linha para ver como é sem ela.

<html lang="en">
  <head>
    <title></title>

    <style type="text/css">
      #wrapper {
        background: #fdd;
        position: relative;
        width: 300px; /* left width + right width */
      }

      #left {
        background: #dfd;
        width: 200px;
      }

      #right {
        background: #ddf;
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <div id="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
        <p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
      </div>
      <div id="right">
        <p>turpis metus. Sed id lorem eu urna suscipit porttitor. Nullam. </p>
      </div>
    </div>
  </body>
</html>

Não há realmente uma boa maneira de o #Right corresponder ao que o #Left se tornou. A melhor maneira de fazer isso é provavelmente:

<div id="wrapper">
    <div id="right"></div> <!-- note that right comes before left -->
    <div id="left"></div>
</div>

Então tenha este estilo:

#left, #right {
    width: 50%; /* Adjust as needed */
#right {
    float: right;
}

Dessa forma, o #Right não afetará o comprimento da página, mas o #Left sempre o fará. No entanto, o #Right ainda não se estende ao comprimento do #Left. Não sei que motivo você tem para ele se esticar até #left, mas presumo que seja algo cosmético. Eu tentaria aplicá -lo no #left ou no #wrapper, se você quiser que ele repita todo o caminho.

Por exemplo, se você deseja o #Left White e #Right Red:

#left {
    background: #fff;
}
#wrapper {
    background: #f00;
}

A melhor solução prática é uma tabela - veja [essa pergunta] (Faça dois elementos CSS flutuados a mesma altura).

Claro que você pode ter suas próprias razões para não usar tabelas ...

Se você está tentando fazer fundos ou algo assim e, portanto, precisar da mesma altura, eu recomendaria tabelas. É muito mais fácil. Se você precisar usar o divs e o divs flutuado, principalmente, este artigo apresenta a única maneira que eu vi que funciona bem. É para três colunas, mas você pode modificá -lo para dois:

http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top