web-dev-qa-db-ja.com

マテリアライズCSSの全ページ列

まず、現在のコードの何が問題になっているのかのスクリーンショットです enter image description here そしてここに同じに関連付けられているコードがあります

  <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ピクセルのマージンを追加すると解決しますが、赤いメニューバーに色を付ける必要があるため、必要ありません。その間に空白はありません。

2番目の質問は、正しい方法がわからないということです。ブラウザウィンドウの高さ全体を青と赤の両方でカバーする必要があります。とにかく具体化するのに同じことをする方法はありますか、そうでない場合はそれがどのように可能であるか私を助けてください。

cssmaterialize
7
georoot

高さをフルビューに設定するには、このCSSを追加します

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

ポートの高さを表示するために高さを設定するのに役立ちます。

7
Muhammad Mehran Khan Attari

これらのソリューションは、いずれかのdivのコンテンツがブラウザウィンドウをオーバーフローしてスクロールしない限り機能します。

両方の列が（ビューポートの高さではなく）ページの高さの100％を満たすために、私はこれを見つけました： CSS：等しい高さの列

次のコードを親div（行）に追加します

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

私はこれを使用して解決しました：

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

.row .colの最小の高さは1pxであるため、！importantを使用する必要があります。

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

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

image

1
Fernando Contreras

Bootstrapと同様に、ほとんどのMaterializeスタイリングはコンテナから始まります。コンテナが100％でない場合、子divも100％ではありません。このスタイリングは、100％の幅と100％の高さから始めます。

[〜＃〜] css [〜＃〜]

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

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

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

「幅：100％」を削除します。コンテナcssにあり、幅は70％になります（デフォルト）。

[〜＃〜] 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>
0
smoore4
var resizeColumn = function () {
    my_column_el.height($(window).height() - my_column_el.offset().top);
  };

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

  resizeColumn();
0
Alex Pshenichnik

2番目の質問、これをCSSファイルに追加します。

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

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

2つの要素に100％の高さが与えられ、新しいブラウザで機能するはずです。古いブラウザの場合は、min-heightを追加できます。

最初の質問ですが、nav要素の行の高さは64pxです。CSSファイルで、好きなように減らすことができます。

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

このソリューションでは、ビューポートのより大きな寸法を100％使用しました。

.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>
0
YEG

フルハイトを取得するには、次のようにします。 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);
});
0
Tirth Patel