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

Question

Я следующий макет для построения:

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

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

Спасибо.

Answer 1

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

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

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

JSFIDDLE with an example

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> 

Answer 2

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

Answer 3

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

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

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>