Margin Top 100% - Высота родительского Div

У меня есть следующий макет для сборки:

В принципе, мне нужно три divs различной высоты с различными высотами заголовка, которые будут расположены на 100% от вершины их родителя, за вычетом высоты заголовка. Я мог бы сделать это с помощью jQuery, но это отзывчивый сайт, поэтому я хотел бы сохранить его как возможно на основе CSS (в противном случае мне придется иметь дело с $(window).resize(), который по моему опыту может быть ненадежным).

Возможно ли это, возможно, используя функцию CSS3 calc?

Спасибо.

Ответ 1

Итак, вы можете попробовать добавить содержимое (оранжевый контейнер) в нижнюю часть синего контейнера (зависит от вашей структуры html, которую вы можете использовать position: absolute, или margin-top в оранжевом контейнере).

Чем вы можете поместить заголовок (зеленый) контейнер внутри оранжевого контейнера и поместить его в положение абсолютного топ -100% (оранжевое положение должно быть absolute или relatve).

Если вы добавите свой html, то будет легко найти более точное решение.

JSFIDDLE с примером

CSS

.box{
   background: #f00;
   height: 150px;
   width: 100%;
   position: relative;
   padding: 20px;
   padding-bottom: 0;
}
.column{
    background: #0f0;
    width: 30%;
    position: relative;
    top: 100%
}
.header{
    position: absolute;
    bottom: 100%;
    width: 100%;
    background: #00f;
 }

HTML:

<div class="box">
    <div class="column">
        <div class="header">
           header 
        </div>
        aaaaaaa<br/>
        aaaaaa
    </div>    
</div>

Ответ 2

У меня есть это решение (работает для любого количества столбцов, если они подходят):

Использование встроенных блоков для выравнивания результатов по центру
Используйте относительное позиционирование для выравнивания блоков с нижней частью синего квадрата (требуется верхнее вертикальное выравнивание)
Переместите зеленые блоки из потока, сделав их абсолютным положением (это оставляет оранжевую рамку в потоке, которая выравнивается с нижней частью синего квадрата).

body {
  font: medium monospace;
}
.blue {
  background: #AAF;
  height: 12em;
  text-align: center;
}
.helper {
  display: inline-block;
  width: 10em;
  vertical-align: top;
  position: relative;
  top: 100%;
}
.green {
  background: #CFC;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
}
.orange {
  background: #FCA;
}

<div class="blue">
  <div class="helper">
    <div class="green">
      1<br/>2
    </div>
    <div class="orange">
      1<br/>2<br/>3
    </div>
  </div>
  <div class="helper">
    <div class="green">
      1<br/>2<br/>3
    </div>
    <div class="orange">
      1<br/>2<br/>3<br/>4<br/>5
    </div>
  </div>
  <div class="helper">
    <div class="green">
      1
    </div>
    <div class="orange">
      1<br/>2<br/>3<br/>4
    </div>
  </div>
</div>

Ответ 3

Попробуйте следующее правило CSS: height: calc(100% - header_height);