6

I would like to have 2 columns that are 100% height, without using <table> and using the responsive columns from skeleton css.

html, body {
    height: 100%;
}
.container {
    min-height: 100%;
}
.column, .columns {
    min-height: 100%;
}

<div class="container">
    <div class="ten columns alpha">
               bla bla bla
    </div>
    <div class="six columns omega">
        bla bla bla
    </div>
</div>

The container looks like it's 100% height but not the columns. Is there a way to achieve this ?

Matthieu
  • 2,289
  • 2
  • 15
  • 11
  • If you want the columns to have the same height as the container, and you know those columns will always be within that container, then you should use `height:inherit`. Be mindful that this is not available in Internet Explorer 7, but since you're using `min-height` and not any fallbacks, it looks like you don't care anyway. – Ohgodwhy Dec 08 '12 at 17:46
  • 1
    OP have you solved this? – A__ Dec 05 '15 at 22:36

1 Answers1

0

Try this CSS:

.container {
    min-height: 100%;
    float: left;
    width: 100%;
}
Teemu Leisti
  • 3,750
  • 2
  • 30
  • 39
abhi
  • 1
  • 1