Full page column in materialize css - css

Question

First here is the screenshot of what is wrong with the current code
and here is the code that is associated with the same
<nav class="blue darken-3">
<div class="nav-wrapper">
Chatter
<ul class="right hide-on-med-and-down">
<li><a nohref><i class="material-icons">search</i></a></li>
<li><a nohref><i class="material-icons">view_module</i></a></li>
<li><a nohref><i class="material-icons">refresh</i></a></li>
<li><a nohref><i class="material-icons">more_vert</i></a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s3 red">1</div>
<div class="col s9 indigo" style="height:100%">4</div>
</div>
first i don't see the reason why 4 is a little below 1. This bug resolves when i add a margin of 10 px to top of row, but the thing is that red menu bar should be colored and therefore i don't wan't any white space in between that.
The second question, that i am not sure about how to do that the correct way is that i want both blue and red to cover the entire height on the browser window. Is there anyway how to do the same in materialize , or if not please help me with how that is possible.

Answer 1

To set the height to full view add this CSS
.col.s3.red, .col.s9.indigo {
min-height: 100vh; /* use "vh" instead of % */
}
It will help setting the height to view port height.

Answer 2

These solutions work so long as the content in either of the div's does not overflow the browser window and cause it to scroll.
In order for both columns to fill 100% of the page height (not viewport height) I found this:
CSS: equal height columns
Add the following code to the parent div (row)
.flex {
display: flex;
flex-wrap: wrap;
min-height: 100vh; /*or use calc(100vh - header_height)*/
}

Answer 3

I solved this using:
.full-width {
height: 100%;
min-height: 1000px !important;
}
You need to use !important because .row .col has a min-height: 1px;
<div class="col s3 yellow lighten-4 full-width">
A
</div>
<div class="col s9 grey lighten-4 full-width">
B
</div>

Answer 4

This solution used 100% of the viewport's larger dimension.
.myColumnFormat {
min-height: 100vmax;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<div>
<h4>This solution uses Materialize</h4>
</div>
<div class="row">
<div class='col myColumnFormat blue s6'>
<ul>
<li>This column is blue</li>
<li>This column's background colour is full length</li>
</ul>
</div>
<div class='col green s5 offset-s1 '>
<ul>
<li>This column is green</li>
<li>This column's background colour ends at the end of this list</li>
</ul>
</div>
</div>

Answer 5

To get full height you can do following. jsfiddle
HTML
<nav class="blue darken-3">
<div class="nav-wrapper">
Chatter
<ul class="right hide-on-med-and-down">
<li><a nohref><i class="material-icons">search</i></a></li>
<li><a nohref><i class="material-icons">view_module</i></a></li>
<li><a nohref><i class="material-icons">refresh</i></a></li>
<li><a nohref><i class="material-icons">more_vert</i></a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s3 red">1</div>
<div class="col s9 indigo">4</div>
</div>
jQuery
$(document).ready(function() {
window_size = $(window).height();
$('.col').height(window_size);
});

Answer 6

Second question, add this in your CSS-File:
div.col.s3.red {
min-height: 500px;
height: 100%;
}
div.col.s9.indigo {
min-height: 500px;
height: 100%;
}
It gives a height of 100% to the two elements, it should work in newer Browsers. For older Browser you could add min-height to it.
First Question, the nav elements have a line-height of 64px, you could reduce it as you like in your CSS-File:
.nav-wrapper {
line-height: 44px;
}

Answer 7

var resizeColumn = function () {
my_column_el.height($(window).height() - my_column_el.offset().top);
};
$(window).on('resize.column', _.debounce(resizeColumn, 300));
resizeColumn();

Answer 8

As with Bootstrap, most Materialize styling starts with a container. If the container is not 100% then child divs will not be either. This styling will start you off with 100% width and 100% height:
CSS
html, body {
min-height: 100vh;
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
width: 100%;
}
.content-wrapper-100vh {
min-height: 100vh;
}
Remove "width: 100%;" in the container css and it will be 70% wide (default).
HTML
<div class="container">
<div class="valign-wrapper content-wrapper-100vh">
<div class="row center-align">
<div class="col l12">
<div class="my-title">Centered/Middle Title</div>
</div>
</div>
</div>
</div>