Ajuste a altura de uma div em HTML com CSS

votos
32

Eu estou tentando colocar para fora uma página mesa-like com duas colunas. Eu quero a coluna mais à direita para atracar ao direito da página, e esta coluna deve ter uma cor de fundo distinta. O conteúdo no lado direito é quase sempre vai ser menor do que a do lado esquerdo. Eu gostaria que a div sobre o direito de estar sempre alto o suficiente para alcançar o separador para a linha abaixo dela. Como posso fazer a minha cor de fundo preencher esse espaço?

.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class=separator>
  <div class=rightfloat>
    Some really short content.
  </div>
  <div class=left> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class=separator>
  <div class=rightfloat>
    Some more short content.
  </div>
  <div class=left> 
    Some really really really really really really
    really really really really big content
  </div>
</div>


Edit: Eu concordo que este exemplo é muito mesa-like e uma tabela real seria uma ótima escolha. Mas minha página real acabará por ser menos mesa-like, e eu gostaria apenas de primeiro mestre esta tarefa!

Além disso, por algum motivo, quando eu criar / editar os meus posts em IE7, o código aparece corretamente na pré-visualização, mas quando eu realmente postar a mensagem, a formatação é removida. Editar meu post no Firefox 2 parece ter funcionado, FWIW.


Outro edit: Sim, eu não aceito a resposta de GateKiller. Ele realmente funciona muito bem em minha página simples, mas não na minha página mais pesado real. Vou investigar alguns dos links vocês têm me apontado.

Publicado 07/08/2008 em 18:02
fonte usuário
Em outras línguas...                            


13 respostas

votos
21

Aham ...

A curta resposta à sua pergunta é que você deve definir a altura de 100% para a tag body e html, em seguida, definir a altura de 100% em cada elemento div que você quer fazer 100% da altura da página.

Na verdade, altura de 100% não vai funcionar na maioria das situações de design - o que pode ser curto, mas não é uma boa resposta. Google "qualquer coluna mais longas" layouts. A melhor maneira é colocar as cols esquerda e direita dentro de um invólucro div, flutuar as cols esquerda e direita e, em seguida, flutuar o wrapper - isso faz com que se esticar para a altura dos recipientes internos - em seguida, definir imagem de fundo da capa exterior. Mas cuidado para quaisquer margens horizontais sobre os elementos flutuavam no caso de você obter o IE "dupla margem de flutuação bug".

Respondeu 07/08/2008 em 19:24
fonte usuário

votos
10

Tentar dar um presente:

html, body,
#left, #right {
  height: 100%
}

#left {
  float: left;
  width: 25%;
}
#right {
  width: 75%;
}
<html>
  <body>
    <div id="left">
      Content
    </div>
    <div id="right">
      Content
    </div>
  </body>
</html>

Respondeu 07/08/2008 em 18:33
fonte usuário

votos
8

Alguns navegadores suporta tabelas CSS, assim você pode criar esse tipo de layout usando as várias CSS display: table-*valores. Não há mais informações sobre tabelas CSS neste artigo (e no livro de mesmo nome) por Rachel Andrew: tudo que sabe sobre CSS é errada

Se você precisa de um layout consistente em navegadores mais antigos que não suportam tabelas CSS, você precisa fazer duas coisas:

  1. Faça o seu elemento "linha da tabela" limpar seus elementos flutuantes internos.

    A maneira mais simples de fazer isso é para definir overflow: hiddenque cuida da maioria dos navegadores, e zoom: 1para acionar a hasLayoutpropriedade em versões mais antigas do IE.

    Existem muitas outras maneiras de carros alegóricos de compensação, se essa abordagem provoca efeitos colaterais indesejáveis que você deve verificar a questão qual o método de 'clearfix' é melhor e o artigo em ter disposição para outros métodos.

  2. Equilibrar a altura dos dois elementos "célula da tabela".

    Há duas maneiras que você poderia abordar esta questão. Ou você pode criar a aparência de alturas iguais, definindo uma imagem de fundo no elemento "linha da tabela" (a técnica de colunas faux ) ou você pode fazer as alturas do jogo colunas, dando a cada uma grande estofo e igualmente grande margem negativa.

    Colunas faux é a abordagem mais simples e funciona muito bem quando a largura de uma ou ambas as colunas é fixo. A outra técnica lida melhor com colunas de largura variável (com base em percentuais ou EM unidades), mas pode causar problemas em alguns navegadores, se você ligar diretamente para o conteúdo dentro de suas colunas (por exemplo, se uma coluna contida <div id="foo"></div>e é ligada ao #foo)

Aqui está um exemplo usando a técnica de preenchimento / margem para equilibrar a altura das colunas.

html, body {
  height: 100%;
}

.row {
  zoom: 1;          /* Clear internal floats in IE */
  overflow: hidden; /* Clear internal floats */
}

.right-column,
.left-column {
  padding-bottom: 1000em;  /* Balance the heights of the columns */
  margin-bottom: -1000em;  /*                                    */
}

.right-column {
  width: 20%;
  float: right;
}

.left-column {
  width: 79%;
  float: left;
}
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>

Esta demonstração Barcamp por Natalie Downe também pode ser útil quando descobrir como adicionar colunas adicionais e bom espaçamento e preenchimento: Colunas altura igual e outros truques (que também é onde eu aprendi pela primeira vez sobre o truque margem / estofo para equilibrar alturas de colunas)

Respondeu 23/06/2009 em 01:09
fonte usuário

votos
5

Eu desisti de estritamente CSS e usou um pouco de jQuery:

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
    rightcol.height(leftcol_height);
else
    leftcol.height(rightcol_height);
Respondeu 23/06/2009 em 00:18
fonte usuário

votos
3

Aqui está um exemplo de colunas com a mesma altura - Colunas altura igual - revisitado

Você também pode verificar a ideia de "Faux Columns", bem - Colunas Faux

Não ir a rota de mesa. Se não for dados tabulares, não tratá-lo como tal. É ruim para acessibilidade e flexibilidade.

Respondeu 07/08/2008 em 18:39
fonte usuário

votos
2

Não há necessidade de escrever própria css, existe uma biblioteca chamada "css Bootstrap", chamando isso na sua cabeça seção HTML, podemos conseguir muitas stylings, Aqui está um exemplo: Se você deseja fornecer duas colunas em uma linha, você pode simplesmente faça o seguinte:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
</div>

Aqui md significa dispositivo médio ,, você pode usar col-sm-6 para dispositivos menores e col-XS-6 para dispositivos extras pequenas

Respondeu 23/06/2017 em 10:01
fonte usuário

votos
2

Eu tive o mesmo problema no meu site ( plug descarado ).

Tive a seção nav "float: right" e o corpo principal da página tem uma imagem de fundo sobre 250px através alinhado à direita e "repetir-y". Eu adicionei então algo com "clear: both" para ele. Aqui está o W3Schools ea propriedade clara CSS .

Coloquei o claro na parte inferior da "página" div classificada. Minha fonte da página é algo como isto.

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

Espero que ajude :)

Respondeu 07/08/2008 em 18:07
fonte usuário

votos
0

Isso deve funcionar para você: Defina a altura de 100% em seu css para o htmle bodyelementos. Você pode então ajustar a altura de suas necessidades no div.

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
} 
Respondeu 29/08/2013 em 08:55
fonte usuário

votos
0

É apenas o suficiente para usar a propriedade css widtha fazê-lo.

Aqui está um exemplo:

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>
Respondeu 24/03/2013 em 15:48
fonte usuário

votos
0

Não consigo pensar em 2 opções

  1. Usar javascript para redimensionar a coluna menor no carregamento da página.
  2. Falso as alturas iguais, definindo a background-colorpara a coluna no recipiente <div/>em vez ( <div class="separator"/>) comrepeat-y
Respondeu 08/08/2008 em 04:35
fonte usuário

votos
0

Um layout de coluna 2 é um pouco difícil de começar a trabalhar em CSS (pelo menos até CSS3 é prático.)

Flutuante esquerda e direita vai trabalhar para um ponto, mas não vai permitir que você estenda fundo. Para fazer fundos ficar sólido, você vai ter que implementar uma técnica conhecida como "colunas faux", que significa, basicamente, suas colunas em si não terá uma imagem de fundo. Seus 2 colunas será contido dentro de uma tag pai. Esta tag pai é dada uma imagem de fundo que contém as cores da coluna 2 que você deseja. Faça este fundo somente tão grande quanto você precisa dele (se é uma cor sólida, apenas torná-lo 1 pixel de altura) e tê-lo repetir-y. AListApart tem um grande passo a passo sobre o que é necessário para fazer o trabalho.

http://www.alistapart.com/articles/fauxcolumns/

Respondeu 07/08/2008 em 19:21
fonte usuário

votos
0

A curta resposta à sua pergunta é que você deve definir a altura de 100% para a tag body e html, em seguida, definir a altura de 100% em cada elemento div que você quer fazer 100% da altura da página.

Respondeu 07/08/2008 em 18:47
fonte usuário

votos
0

Apenas tentando ajudar aqui para que o código é mais legível.
Lembre-se que você pode inserir trechos de código clicando no botão no topo com "101010". Basta digitar o seu código, em seguida, selecione-o e clique no botão.

Aqui está um exemplo:

<html>
    <body>
    <style type="text/css">
        .rightfloat {
            color: red;
            background-color: #BBBBBB;
            float: right;
            width: 200px;
        }

        .left {
            font-size: 20pt;
        }

        .separator {
            clear: both;
            width: 100%;
            border-top: 1px solid black;
        }
    </style>
Respondeu 07/08/2008 em 18:13
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more