0

https://github.com/puikinsh/gentelellaに基づいてレイアウトを作成しています 。2 番目の列がスクロール可能な 3 列のテンプレートを作成しようとしています。

レイアウトのモックアップです。 ここに画像の説明を入力 基本的に、内部に2つのパネルを作成する必要があります

min-height を 100% にして、オーバーフローを親に隠してみました。スクロールするオーバーフローyを持つright_col。

ここに画像の説明を入力 これが問題です。2 番目の列はスクロールしているように見えますが、コンテンツを表示するために必要な長さ全体を占めています。

ここに私のコードがあります

ここに私のcssがあります

4

1 に答える 1

0

コンテナー要素に 100vh の高さを指定すると、その子に 100% の高さを指定できます。

vh は、ビューポートの高さの測定単位であり、その後の相対的な測定の基礎となるものを与えることができます。

問題は、スクロール可能な要素の高さが正しくないことです。max-heightまたはheightを設定すると、状況が改善されます。

この例では、すべての列に 100% の min-height を指定しますが、スクロールする列に 100% の max-height を指定し、overflow-y をスクロールします。

.column {
  display: inline-block;
  width: 33%;
  min-height: 100%;
  vertical-align: top;
  margin: auto;
  font-size: 3em; /* This is just for the example, so we have enough stuff to scroll */
}
#column2 {
  overflow-y: scroll;
  max-height: 100%;
}
<div class="column" id="column1">
</div>
<div class="column" id="column2">
  content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>
</div>
<div class="column" id="column3">
</div>

重要なのは、コンテンツをスクロールしたい要素の高さを定義することです。

于 2016-10-05T02:51:44.943 に答える