Em uma página de duas colunas, como posso aumentar o div esquerdo para a mesma altura do div direito usando CSS ou Javascript?

Question

Estou tentando fazer uma página de duas colunas usando um layout baseado em div (sem tabelas, por favor!).O problema é que não consigo aumentar o div esquerdo para corresponder à altura do direito.Meu div certo normalmente tem muito conteúdo.

Aqui está um exemplo combinado do meu modelo para ilustrar o problema.

<div style="float:left; width: 150px; border: 1px solid;">
  <ul>
    <li>nav1</li>
    <li>nav2</li>
    <li>nav3</li>
    <li>nav4</li>
  </ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>

texto alternativo http://involution.com/images/divlayout.png

Answer 1

Use jQuery para este problema;basta chamar esta função em sua função pronta:

function setHeight(){
  var height = $(document).height(); //optionally, subtract some from the height
  $("#leftDiv").css("height", height + "px");
}

Answer 2

Sua resposta mais simples está na próxima versão do css (3), que atualmente nenhum navegador suporta.

Por enquanto você está relegado a calcular alturas em javascript e defini-las no lado esquerdo.

Se a navegação é tão importante para ser posicionada dessa forma, execute-a no topo.

você também pode fazer um truque visual movendo as bordas para o contêiner e para o interior maior, e fazer com que pareça ter o mesmo tamanho.

isso faz com que pareça igual, mas não é.

<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
  <div style="float:left; width: 150px; border-top: 1px solid;">
    <ul>
     <li>nav1</li>
     <li>nav2</li>
     <li>nav3</li>
     <li>nav4</li>
    </ul>
 </div>
 <div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  ...
 </div>
 <div style="clear:both;" ></div>
</div>

Answer 3

Isso pode ser feito em CSS!Não deixe que as pessoas lhe digam o contrário.

A maneira mais fácil e indolor de fazer isso é usar o Colunas falsas método.

No entanto, se essa solução não funcionar para você, leia esta técnica.Mas esteja avisado, esse é o tipo de hackeamento de CSS que fará você acordar suando frio no meio da noite.

A essência disso é que você atribui uma grande quantidade de preenchimento à parte inferior da coluna e uma margem negativa do mesmo tamanho.Então você coloca suas colunas em um contêiner que tem overflow: hidden definir.Mais ou menos os valores de preenchimento/margem permitem que a caixa continue se expandindo até atingir o final do wrapper (que é determinado pela coluna com maior conteúdo), e qualquer espaço extra gerado pelo preenchimento é cortado como estouro.Não faz muito sentido, eu sei...

<div id="wrapper">
  <div id="col1">Content</div>
  <div id="col2">Longer Content</div>
</div>

#wrapper {
  overflow: hidden;
}

#col1, #col2 {
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

Certifique-se de ler todo o artigo ao qual criei um link, pois há uma série de advertências e outros problemas de implementação.Não é uma técnica bonita, mas funciona bastante bem.

Answer 4

Você pode fazer isso em jQuery de maneira muito simples, mas não tenho certeza se JS deve ser usado para essas coisas.A melhor maneira é fazer isso com CSS puro.

1. Dê uma olhada colunas falsas ou mesmo Colunas Fluidas Falso

2. Além disso, outra técnica (não funciona no belo IE6) é posicionar:relative o contêiner pai.O contêiner filho (a lista de navegação no seu caso) deve ser posicionado de forma absoluta e forçado a ocupar todo o espaço com 'top:0;inferior:0;'

Answer 5

Esta é uma daquelas coisas simples e perfeitamente razoáveis ​​que o CSS não pode fazer.Faux Columns, conforme sugerido por Silviu, é uma solução alternativa hackeada, mas funcional.Seria adorável se algum dia houvesse uma maneira de dizer

div.foo {
height: $(div.blah.height);
}

Answer 6

Esse pode ser feito com css usando cores de fundo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #87ceeb;
    font-size: 1.2em;
}
#container {
    width:100%; /* any width including 100% will work */
    color: inherit;
    margin:0 auto; /* remove if 100% width */
    background:#FFF;
}
#header {
    width: 100%;
    height: 160px;
    background: #1e90ff;
}
#content {/* use for left sidebar, menu etc. */
    background: #99C;
    color: #000;
    float: right;/* float left for right sidebar */
    margin: 0 0 0 -200px; /* adjust margin if borders added */
    width: 100%;
 }
#content .wrapper {
    background: #FFF;
    margin: 0 0 0 200px;
    overflow: hidden;
    padding: 10px; /* optional, feel free to remove */
}
#sidebar {
    background: #99C;
    color: inherit;
    float: left;
    width: 180px;
    padding: 10px;
}
.clearer {
    height: 1px;
    font-size: -1px;
    clear: both;
}

/* content styles */
#header h1 {
    padding: 0 0 0 5px;
}
#menu p {
    font-size: 1em;
    font-weight: bold;
    padding: 5px 0 5px 5px;
}
#footer {
    clear: both;
    border-top: 1px solid #1e90ff; 
    border-bottom: 10px solid #1e90ff;
    text-align: center;
    font-size: 50%;
    font-weight: bold;
}
#footer p {
    padding: 10px 0;
} 
</style>
</head>

<body>


<div id="container">
<!--header and menu content goes here -->

<div id="header">
<h1>Header Goes Here</h1>
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc 

vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>

<div id="sidebar">
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>

<div class="clearer"></div><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>

Answer 7

@hoyhoy

Se um designer puder fazer isso funcionar em HTML, então ele poderá ter esse design.Se ele for um verdadeiro mestre em web design, perceberá que isso é uma limitação da mídia, pois o vídeo não é possível em anúncios de revistas.

Se ele quiser simular o peso dando igual importância às 2 colunas, altere as bordas, para que pareçam ter o mesmo peso, e faça com que as cores das bordas contrastem com a cor da fonte das colunas.

Mas quanto a deixar os elementos físicos com a mesma altura, você só pode fazer isso com uma construção de tabela, ou definindo as alturas, neste momento.Para simular que pareçam do mesmo tamanho, eles não precisam ser do mesmo tamanho.

Answer 8

Pensando bem, nunca fiz isso com borda inferior na coluna.Provavelmente está transbordando e sendo cortado.Talvez você queira que a borda inferior venha de um elemento separado que faça parte do conteúdo da coluna.

De qualquer forma, eu sei que não é uma solução mágica perfeita.Talvez você precise apenas brincar com ele ou contornar suas deficiências.

Answer 9

Existe também uma solução baseada em Javascript.Se você possui jQuery, pode usar o plugin abaixo.

<script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() {
    var maxHeight=0;

    this.each(function(){
        if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
    });

    this.each(function(){
        $(this).height(maxHeight + "px");
        if (this.offsetHeight>maxHeight) {
            $(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
        }
    });
};

// usage
$(function() {
    $('.column1, .column2, .column3').equalHeights();
});
</script>

Answer 10

Eu uso isso para alinhar 2 colunas com ID "centro" e "direita":

var c = $("#center");
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10);
var r = $("#right");
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10);

if (c.outerHeight() < r.outerHeight()) {
    c.height(r.height () + rp - cp);
} else {
    r.height(c.height () + cp - rp);
}

Espero que ajude.

Answer 11

Para crescer o div do menu esquerdo com a mesma altura do div de conteúdo correto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        var height = $(document).height(); //optionally, subtract some from the height
        $("#menu").css("height", (height) + "px");
        $("#content").css("height", (height) + "px");
    });
</script>
<style type="text/css">
    <!--

    html, body {
        font-family: Arial;
        font-size: 12px;
    }


    #header {
        background-color: #F9C;
        height: 200px;
        width: 100%;
        float: left;
        position: relative;
    }

    #menu {
        background-color: #6CF;
        float: left;
        min-height: 100%;
        height: auto;
        width: 10%;
        position: relative;
    }

    #content {
        background-color: #6f6;
        float: right;
        height: auto;
        width: 90%;
        position: relative;
    }

    #footer {
        background-color: #996;
        float: left;
        height: 100px;
        width: 100%;
        position: relative;
    }
    -->
</style>
</head>


<body>
<div id="header">
    i am a header
</div>
<div id="menu">
    i am a menu
</div>
<div id="content">
    I am an example of how to do layout with css rules and divs.
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>

</div>
<div id="footer">
    footer
</div>


</body>
</html>