Полный столбец страницы материализовать CSS

Question

Первого вот скриншот того, что случилось с текущим кодом и вот код, который связан с тем же

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

первым я не вижу причина, почему 4 немного ниже 1. Эта ошибка решает, когда я добавляю отступ в размере 10 px к началу строки, но дело в том, что красная строка меню должна быть окрашена, и поэтому я не вижу никакого пробела между ними что.

Второй вопрос, что я не уверен, как правильно это сделать, так это то, что я хочу, чтобы синий и красный охватывали всю высоту в окне браузера. В любом случае, как сделать то же самое в материализации, или, если не помогите мне, как это возможно.

Answer 1

Второй вопрос, добавьте это в CSS-файл:

div.col.s3.red { 
    min-height: 500px; 
    height: 100%; 
} 

div.col.s9.indigo { 
    min-height: 500px; 
    height: 100%; 
} 

Это дает высоту 100% к двум элементам, он должен работать в новых браузерах. Для более старого браузера вы можете добавить min-height.

Первый вопрос, СЧА элементы имеют высоту строки в 64px, вы можете уменьшить его, как вам нравится в вашем CSS-файле:

.nav-wrapper { 
    line-height: 44px; 
} 

Answer 2

Чтобы получить полную высоту вы можете сделать следующее. 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); 
}); 

Answer 3

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

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

    resizeColumn(); 

Answer 4

Чтобы установить высоту в виду добавить CSS

.col.s3.red, .col.s9.indigo { 
    min-height: 100vh; /* use "vh" instead of % */ 
} 

Это поможет установить высоту для просмотра высоты порта.

Answer 5

Я решил эту проблему с помощью:

.full-width { 
    height: 100%; 
    min-height: 1000px !important; 
} 

Вам нужно использовать! important, потому что .row .col имеет минимальную высоту: 1px;

<div class="col s3 yellow lighten-4 full-width"> 
    A 
    </div> 

    <div class="col s9 grey lighten-4 full-width"> 
    B 
    </div> 

Answer 6

Эти решения работают до тех пор, как содержание в любом из Див-х годов не переполнить окно браузера и вызвать его для прокрутки.

Для того, чтобы обе колонки, чтобы заполнить 100% высоты страницы (не видовой экран высоты) Я нашел это: CSS: equal height columns

Добавьте следующий код для родительского DIV (строка)

.flex { 
    display: flex; 
    flex-wrap: wrap; 
    min-height: 100vh; /*or use calc(100vh - header_height)*/ 
}