Full page column in materialize 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">
      <a href="#!" class="brand-logo center">Chatter</a>
      <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.

score 10 · Answer 1 · answered Nov 09 '16 at 15:26

10

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.

answered Nov 09 '16 at 15:26

Muhammad Mehran Khan Attari

628
6
9

score 2 · Answer 2 · answered Jan 17 '18 at 21:27

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)*/
}

score 1 · Answer 3 · edited Jan 16 '17 at 05:30

1

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>

edited Jan 16 '17 at 05:30

MJH

2,301
7
18
20

answered Jan 16 '17 at 04:13

Fernando Contreras

29
2

score 1 · Answer 4 · answered Oct 16 '19 at 02:33

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>

Javier Gonzalez · Answer 5 · 2016-05-04T17:19:27.340

0

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;
}

edited May 04 '16 at 17:19

answered May 04 '16 at 16:28

Javier Gonzalez

311
2
5

First part of the question is working properly but the second part is not. Height too 100% is not working its still the same. – georoot May 04 '16 at 16:31
I created a jsfiddle https://jsfiddle.net/Tirth_Patel/w0v2e5j7/ and it works perfect there is no margin between blue one and header. – Tirth Patel May 04 '16 at 16:47
@JavierGonzalez here is the snapshot https://www.anony.ws/image/Jz2Y . The pen works but the issue is that by setting min-height to 500 px, If there is no content it remains at 500 px and if content overflows, it becomes more than that, What i need is them to perfectly align to height for any browser irrespective of content contained within :) – georoot May 04 '16 at 18:17
Try this jquery code:https://j.eremy.net/set-element-height-to-viewport/ you have to change the selector – Javier Gonzalez May 04 '16 at 20:54

score 0 · Answer 6 · answered May 04 '16 at 16:50

To get full height you can do following. jsfiddle

HTML

<nav class="blue darken-3">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo center">Chatter</a>
      <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);
});

you did not consider the height of nav in this case, which becomes diffrent for diffrent viewport. So actually the stuff overflows in a browser. The main canvas is for chat and will be having its own scrollbar so i don't think that that might be the best option here — georoot, May 04 '16 at 16:52

score 0 · Answer 7 · answered Oct 12 '16 at 20:24

0

var resizeColumn = function () {
    my_column_el.height($(window).height() - my_column_el.offset().top);
  };

  $(window).on('resize.column', _.debounce(resizeColumn, 300));

  resizeColumn();

answered Oct 12 '16 at 20:24

Alex Pshenichnik

61
3

4

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – andreas Oct 12 '16 at 21:09

smoore4 · Answer 8 · 2018-08-23T18:41:45.443

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>

Full page column in materialize css

8 Answers8