Как сделать столбцы сетки бутстрапа охватывают всю высоту экрана

Я пытаюсь сделать отзывчивое окно «приложение» для веб-страницы с библиотекой material design. Экран приложения необходим, чтобы соответствовать странице, и не больше, по существу, экрана планшета. У меня есть вложенные div в элементах строки, которые используют flexbox и работают отлично (распределяют пространство и помещают содержащий div).Как сделать столбцы сетки бутстрапа охватывают всю высоту экрана

<body> 

    <nav class="amber darken-4"></nav> 

    <div class="container-fluid"> 
    <div class="row"> 


     <div class="card large amber lighten-4 col l8 m8 s8 left"> 
     <div class="card small red accent-3 col m12 user"> 
     </div><!-- small card user --> 
     <div class="card small red accent-3 col m12 cart"> 
     </div><!-- small card cart --> 

     </div><!-- card col 8 --> 


     <div class="card large amber lighten-4 col l4 m4 s4 right"> 


      <div class="card small red accent-3 col m12 promo"> 
      </div><!-- small card promo --> 
      <div class="card small red accent-3 col m12 keypad"> 
      </div><!-- small card keypad --> 


     </div><!-- card col 4 --> 


    </div><!-- row --> 
    </div><!-- container --> 


    <!--Import jQuery before materialize.js--> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript" src="js/materialize.min.js"></script> 

</body>

Я хочу, чтобы элементы «строки» (цв М8 и цв m4) расширить и заполнить оставшееся пространство экрана на всех размеров экрана. Есть ли исправление CSS для него или это можно сделать с помощью flexbox?

источник

2015-05-08 sushcha

Вы, возможно, придется смотреть в гибком решении коробки или установить столбцы и все родительские элементы в мин-высота: 100% с помощью CSS –

JQuery? Если хотите, я дам ответ. – CENT1PEDE

@GreenFox да пожалуйста. что-нибудь. – sushcha

Вот что-то, что может вам помочь.

Живой пример HERE

HTML

<div class="row"> 
    // Contents 
</div>

CSS

.row { 
    background-color: #ccc; 
}

//Gets the current height of the screen. 
var screenHeight = $(window).height(); 
var row = $('.row'); 

// Assign that height to the .row 
row.css({ 
    'height': screenHeight + 'px', 
}); 

// This makes the div's height responsive when you resize the screen or the window of the browser. 
$(window).resize(function() { 
    screenHeight = $(window).height(); 
    row.css({ 
     'height': screenHeight + 'px', 
    }); 
});

Живой пример HERE

источник

2015-05-08 10:07:50 CENT1PEDE

Спасибо. Я просто попробовал это некоторое время назад, и это работает. – sushcha

Youre приветствуем. Рад был помочь. :) @sushcha – CENT1PEDE

Как сделать столбцы сетки бутстрапа охватывают всю высоту экрана

ответ

Смежные вопросы