left column stuff
right colu...">
Geek asks and answers

Create two div columns with the same height

<div id="content">
  <div id="leftColumn">
    left column stuff
  </div>
  <div id="rightColumn">
    right column sidebar stuff
  </div>
</div>

When the left column is longer than the right, the background image of the right column is turned off. How to make both columns the same height? (I tried applying a background image to the contents of the div and fixed the problem, but some pages do not use the sidebar, so I'm trying to find a different solution).

columns also cannot be fixed heights.

+1
source share
7 answers

If you care about IE6 and IE7, the easiest answer is to install

display: table-cell;

. http://ie7nomore.com/css2only/table-layout/ CSS2.1 ( , / )
, " ", : table CSS display , HTML table, div ( .. ) - , :)

IE6 IE7 (, , ... , IE - )

+8

div display:table-row, display:table-cell;height:100%;. : heyvian.com/html5-css3, contenteditable, , .

, ie6 ie7. .

+1

:

"" , html :

<div id="content">
  <div id="leftColumn" class="elements">
    left column stuff
  </div>
  <div id="rightColumn" class="elements">
    right column sidebar stuff
  </div>
</div>

, , 2 . :

$(document).ready(function () {
    var highestCol = Math.max($('#leftColumn').height(),$('#rightColumn').height());
    $('.elements').height(highestCol);      
});

jQuery , 2 . ( )

+1

, <body> . , , . .

#about-me { background: url(about.png) repeat-y; }
#contact { background: url(contact.png) repeat-y; }

<body id="about-me">


<body id="contact">
0

More articles:


All Articles