Configurando a altura de uma div em HTML com CSS

StackOverflow https://stackoverflow.com/questions/4973

  •  08-06-2019
  •  | 
  •  

Pergunta

Estou tentando criar uma página semelhante a uma tabela com duas colunas.Quero que a coluna mais à direita seja encaixada à direita da página e que essa coluna tenha uma cor de fundo distinta.O conteúdo do lado direito quase sempre será menor do que o do lado esquerdo.Gostaria que o div à direita fosse sempre alto o suficiente para alcançar o separador da linha abaixo dele.Como posso fazer com que minha cor de fundo preencha 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>

Editar:Concordo que este exemplo é muito parecido com uma tabela e uma tabela real seria uma boa escolha.Mas minha página "real" eventualmente será menos parecida com uma tabela, e eu gostaria apenas de dominar essa tarefa primeiro!

Além disso, por algum motivo, quando eu crio/edito minhas postagens no IE7, o código aparece corretamente na visualização, mas quando eu realmente posto a mensagem, a formatação é removida.Editar minha postagem no Firefox 2 parece ter funcionado, FWIW.

Outra edição:Sim, não aceitei a resposta do GateKiller.Na verdade, funciona bem na minha página simples, mas não na minha página mais pesada.Vou investigar alguns dos links que vocês me indicaram.

Foi útil?

Solução

Aham...

A resposta curta para sua pergunta é que você deve definir a altura de 100% para o corpo e a tag html e, em seguida, definir a altura para 100% em cada elemento div que deseja tornar 100% a altura da página.

Na verdade, 100% de altura não funcionará na maioria das situações de projeto - pode ser curto, mas não é uma boa resposta.Layouts de "qualquer coluna mais longa" do Google.A melhor maneira é colocar as colunas esquerda e direita dentro de uma embalagem div, flutue as colunas esquerda e direita e, em seguida, flutue o wrapper - isso o faz esticar até a altura dos contêineres internos - e defina a imagem de fundo no wrapper externo.Mas observe se há margens horizontais nos elementos flutuantes, caso você obtenha o "bug de flutuação de margem dupla" do IE.

Outras dicas

Experimente:

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>

Alguns navegadores suportam tabelas CSS, então você pode criar esse tipo de layout usando vários CSS display: table-* valores.Há mais informações sobre tabelas CSS neste artigo (e no livro de mesmo nome) de Rachel Andrew: Tudo o que você sabe sobre CSS está errado

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

  1. Faça com que seu elemento "linha da tabela" limpe seus elementos flutuantes internos.

    A maneira mais simples de fazer isso é definir overflow: hidden que cuida da maioria dos navegadores, e zoom: 1 para acionar o hasLayout propriedade em versões mais antigas do IE.

    Existem muitas outras maneiras de limpar os carros alegóricos. Se esta abordagem causar efeitos colaterais indesejáveis, você deve verificar a pergunta qual método de 'clearfix' é melhor e o artigo em ter layout para outros métodos.

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

    Existem duas maneiras de abordar isso.Você pode criar a aparência de alturas iguais definindo uma imagem de fundo no elemento "linha da tabela" (o técnica de colunas falsas) ou você pode fazer com que as alturas das colunas correspondam, dando a cada uma delas um preenchimento grande e uma margem negativa igualmente grande.

    Colunas falsas são a abordagem mais simples e funcionam muito bem quando a largura de uma ou ambas as colunas é fixa.A outra técnica lida melhor com colunas de largura variável (com base em unidades percentuais ou em), mas pode causar problemas em alguns navegadores se você vincular diretamente ao conteúdo de suas colunas (por exemplo,se uma coluna contiver <div id="foo"></div> e você está vinculado a #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 do Barcamp de Natalie Downe também pode ser útil ao descobrir como adicionar colunas adicionais e espaçamento e preenchimento agradáveis: Colunas de altura igual e outros truques (foi também onde aprendi pela primeira vez sobre o truque de margem/preenchimento para equilibrar as alturas das colunas)

Desisti estritamente do CSS e usei 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);

Aqui está um exemplo de colunas de altura igual - Colunas de altura igual - revisitadas

Você também pode conferir a ideia de "Colunas Falsas" - Colunas falsas

Não siga o caminho da mesa.Se não forem dados tabulares, não os trate como tal.É ruim para acessibilidade e flexibilidade.

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

Eu tinha a seção de navegação "float:direita" e o corpo principal da página tem uma imagem de fundo de cerca de 250px alinhada à direita e "repetir-y".Em seguida, adicionei algo com "clear:ambos" para isso.Aqui está o W3Schools e o Propriedade de limpeza CSS.

Coloquei o clear na parte inferior da div classificada como "página".A fonte da minha página é mais ou menos assim.

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

Não há necessidade de escrever css próprio, existe uma biblioteca chamada "Bootstrap css", chamando-a na seção principal do HTML, podemos obter muitos estilos. Aqui está um exemplo:Se quiser fornecer duas colunas seguidas, você pode simplesmente fazer 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 extra pequenos

A resposta curta para sua pergunta é que você deve definir a altura de 100% para o corpo e a tag html e, em seguida, definir a altura para 100% em cada elemento div que deseja tornar 100% a altura da página.

Um layout de 2 colunas é um pouco difícil de trabalhar em CSS (pelo menos até que CSS3 seja prático).

Flutuar para a esquerda e para a direita funcionará até certo ponto, mas não permitirá que você estenda o plano de fundo.Para fazer com que os planos de fundo permaneçam sólidos, você terá que implementar uma técnica conhecida como “colunas falsas”, que basicamente significa que suas próprias colunas não terão uma imagem de plano de fundo.Suas 2 colunas estarão contidas dentro de uma tag pai.Esta tag pai recebe uma imagem de fundo que contém as 2 cores de coluna desejadas.Faça esse plano de fundo do tamanho necessário (se for de uma cor sólida, deixe-o com apenas 1 pixel de altura) e repita-o.AListApart tem um ótimo guia sobre o que é necessário para fazê-lo funcionar.

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

Posso pensar em 2 opções

  1. Use javascript para redimensionar a coluna menor no carregamento da página.
  2. Falsifique as alturas iguais definindo o background-color para a coluna no contêiner <div/> em vez de (<div class="separator"/>) com repeat-y

Só estou tentando ajudar aqui para que o código fique mais legível.
Lembre-se que você pode inserir trechos de código clicando no botão na parte superior com “101010”.Basta inserir seu código, destacá-lo e clicar 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>

Isso deve funcionar para você:Defina a altura para 100% no seu css para o html e body elementos.Você pode então ajustar a altura de acordo com suas necessidades no div.

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
}

Basta usar a propriedade css width para fazer isso.

Aqui está um exemplo:

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>


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

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