сделать конкретные столбцы растянуть высоту страницы

Question

Я хотел бы сделать два конкретных столбцов в макете ниже, растянуть на всю высоту страницы, если их на мобильный (таблетки они могут все еще растянуть как большинство таблетки 720.

<div class="rows"> 
    <div class="col-md-1"> 
    </div> 
    <div class="col-md-10"> 
    </div> 
    <div class="col-md-1"> 
    </div> 
    </div> 

col-md-1, прямо сейчас, только до тех пор, пока контент, который вы вкладываете в него, растягивается, как бы мне ни хотелось, на чем-то выше 720, чтобы растянуть страницы на всю высоту, то есть они должны растянуться до нижнего колонтитула, а затем на чем-то меньшем, чем 720, они должны быть просто правильными по высоте коробками, то есть «растягиваться, чтобы соответствовать их содержимому»

Ho w я мог бы добиться этого, не нарушая поведение загрузочного диска по умолчанию.

Answer 1

1) В вашем HTML добавить новый класс в DIV (ы), которые вы хотите, чтобы увеличить до высоты страницы

2) В вашем CSS, использование @ медиа-экран с минимальной шириной 720px, так что вы указываете это только для немобильных устройств, а в новом классе укажите минимальную высоту как 100%. См. Ниже.

@media screen and (min-width: 720px){ 
.new-class { 
    min-height:100%; }}