Pleine page dans la colonne de matérialiser css

D'abord voici la capture d'écran de ce qui est incorrect avec le code actuel
Pleine page dans la colonne de matérialiser css
et voici le code qui est associé avec le même

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

d'abord je ne vois pas la raison pour laquelle 4 est un peu en dessous de 1. Ce bug se résout quand j'ajoute une marge de 10 px de haut de la ligne, mais la chose est que le rouge de la barre de menu doit être colorée, et donc je n'ai pas wan pas tout espace blanc entre les deux.

La deuxième question, je ne suis pas sûr de savoir comment faire de la bonne manière, c'est que je veux à la fois bleu et rouge pour couvrir la totalité de la hauteur de la fenêtre du navigateur. Est-il de toute façon comment faire la même chose à se concrétiser , ou si non, merci de m'aider avec la façon dont cela est possible.

OriginalL'auteur georoot | 2016-05-04

css materialize

5

De définir la hauteur de la vue complète d'ajouter cette CSS
```
.col.s3.red, .col.s9.indigo {
  min-height: 100vh; /* use "vh" instead of % */
}
```
Il aidera réglage de la hauteur de vue de port de la hauteur.

OriginalL'auteur Muhammad Mehran Khan Attari
2

Ces solutions ne fonctionne, tant que le contenu de la div n'a pas de dépassement de la fenêtre du navigateur et de l'amener à faire défiler.

Pour que les deux colonnes à remplir 100% de la hauteur de la page (pas de fenêtre de la hauteur), j'ai trouvé ceci:
CSS: l'égalité de la hauteur des colonnes

Ajoutez le code suivant à la div parent (ligne)
```
.flex {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;  /*or use calc(100vh - header_height)*/
}
```
OriginalL'auteur mevans

Pour obtenir la hauteur que vous pouvez faire à la suite. 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);
});

vous n'avez pas prendre en compte la hauteur de la valeur liquidative dans ce cas, qui devient diffrent pour les différentes fenêtre d'affichage. Donc en fait le truc des débordements dans un navigateur. La principale toile est pour le chat et sera d'avoir sa propre barre de défilement, donc je ne pense pas que cela pourrait être la meilleure option ici

OriginalL'auteur Tirth Patel

0

Deuxième question, ajouter ceci dans votre CSS-Fichier:
```
div.col.s3.red {
    min-height: 500px;
    height: 100%;
}

div.col.s9.indigo {
    min-height: 500px;
    height: 100%;
}
```
Il donne une hauteur de 100% pour les deux éléments, il faut travailler dans les Navigateurs les plus récents. Pour les anciens Navigateur vous pouvez ajouter min-height.

Première Question, la valeur liquidative éléments ont une hauteur de la ligne de 64px, vous pourriez réduire le comme vous le souhaitez dans votre CSS-Fichier:
```
.nav-wrapper {
    line-height: 44px;
}
```
Première partie de la question est fonctionne correctement, mais la seconde partie ne l'est pas. Hauteur trop de 100% n'est pas de travail c'est toujours la même.
Je l'ai essayé et il fonctionne avec le code que vous montrons ici
Voici un stylo pour la même codepen.io/georoot/stylo/dMwNby
J'ai créé un jsfiddle jsfiddle.net/Tirth_Patel/w0v2e5j7 et il fonctionne parfaitement, il n'y a pas de marge entre un bleu et un en-tête.
Édité ma réponse

OriginalL'auteur Javier Gonzalez
0
```
var resizeColumn = function () {
    my_column_el.height($(window).height() - my_column_el.offset().top);
  };

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

  resizeColumn();
```
Alors que cet extrait de code, peut-être de résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre post. Rappelez-vous que vous répondez à la question pour les lecteurs dans l'avenir, et ces personnes pourraient ne pas connaître les raisons de votre code suggestion.

OriginalL'auteur Alex Pshenichnik

J'ai résolu ce problème en utilisant:

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

Vous avez besoin pour utiliser !important parce que .ligne .le col a un 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>

Pleine page dans la colonne de matérialiser css

OriginalL'auteur Fernando Contreras

Comme avec Bootstrap, la plupart se Matérialiser style commence avec un conteneur. Si le conteneur n'est pas à 100%, alors enfant divs ne sera pas non plus. Ce style va vous commencez avec 100% de largeur et de 100% de la hauteur:

CSS

html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  min-height: 100vh;
  width: 100%;
}

.content-wrapper-100vh {
  min-height: 100vh;
}

Supprimer "width: 100%;" dans le conteneur css et il sera de 70% à l'échelle (par défaut).

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>

OriginalL'auteur smoore4

Vous devez vous connecter pour publier un commentaire.