i'm trying make responsive "app" screen webpage material design library. app screen required fit page , no more on tablet screen. have nested div's within row elements use flexbox , work perfectly(distribute space , fit 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 make "row" elements(col m8 , col m4) expand , fill remaining screen space on screen sizes. there css fix or can flexbox?
here might you.
live sample here
html
<div class="row"> // contents </div> css
.row { background-color: #ccc; } js
//gets current height of screen. var screenheight = $(window).height(); var row = $('.row'); // assign height .row row.css({ 'height': screenheight + 'px', }); // makes div's height responsive when resize screen or window of browser. $(window).resize(function () { screenheight = $(window).height(); row.css({ 'height': screenheight + 'px', }); }); live sample here
Comments
Post a Comment