Equal height columns with borders and buttons at the bottom_问答_开发者

Equal height columns with borders and buttons at the bottom

开发者 https://www.devze.com 2023-01-27 06:17 出处：网络

I have been trying to get this right for days but I just can\'t. My scenario is this: I need three columns of equal height. There needs to be borders between them. The left column will have a bit mor

相关专题：css

I have been trying to get this right for days but I just can't.

My scenario is this: I need three columns of equal height. There needs to be borders between them. The left column will have a bit more content than the other two and the other two need to have buttons at the bottom (that are positioned so that their bottom edge is where the left column's content ends).

Here is an image that shows what I mean: http://img217.imageshack.us/img217/6400/49593032.png

I have tried the huge-padding-bottom-and-equally-huge-but-negative-margin-bottom-hack which works great until I try to move the buttons down. At first I tried 开发者_StackOverflow社区to use absolute positioning on the button and position:relative on the container but since the container needs overflow: hidden to work the button will be hidden and placed at the bottom of the container (which is about 32767 pixels down due to the huge padding).

I also tried using the above hack while adding a second row which I put the buttons in. Besides the fact that the semantics of that don't make much sense, this method made it so that the content of the left column doesn't go all the way down. Since the hack required overflow: hidden attempts to use negative margins to push the second row up didn't work out either.

So I'm stuck here. Faux columns wouldn't help me and javascript is not an option. What would you do?

Use A List Apart's Holy Grail and position the buttons absolutely.

Don't really like it in this case, but at least one solution would be to use a table. The text height in the first column would force the height for the other cells, and you could use relative positioning inside the cells (with a div) to have the buttons at the bottom.

[removed code --- not 100% sure about your exact requirements]

You can use absolute positioning for your divs and then absolute position the buttons in them. Try this code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
  body { height: 100%; margin: 0; }
  .col {
    width: 33%;
    position: absolute;
    top: 0;
    bottom: 0;
    border: 1px solid #000;
    background: blue; 
    position: absolute; 
  }
  .left { left: 0; }
  .mid { left: 33.33%; }
  .right { left: 66.66%; }
  .button { position: absolute; bottom: 0; right: 0; }
</style>
</head>
<body>
<div class="col left">
  sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg 
</div>
<div class="col mid">
  sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg 
  <button class="button">click me</button>
</div>
<div class="col right">
  sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg 
  <button class="button">click me</button>
</div>
</body>
</html>