CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapflexbox
sushcha
sushcha

Reputation: 55

How to make bootstrap grid columns span full height of screen

I'm trying to make a responsive "app" screen for a webpage with a material design library. The app screen is required to fit the page and no more on essentially a tablet screen. I have nested div's within the row elements which use flexbox and work perfectly(distribute space and fit the containing 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>

I want to make "row" elements(col m8 and col m4) expand and fill the remaining screen space on all screen sizes. Is there a CSS fix to it or can it do with flexbox?

Upvotes: 0

Views: 2336

Answers (1)

jofftiquez
jofftiquez

Reputation: 7708

Here is something that might help you.

Live sample HERE

HTML

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

CSS

.row {
    background-color: #ccc;
}

JS

//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',
    });
});

Live sample HERE

Upvotes: 2

Related Questions