CSSイメージギャラリー（オーバーフローの問題）

Question

私は、HTMLとCSSを使って自分のポートフォリオ用のより良いイメージギャラリーを作成し始めましたが、イメージが固定された高さの領域に表示されるので問題がありますサムネイルをたくさん追加するときの垂直スクロール。私がここで意味することを見ることができます：http://www.joliverdesigns.co.uk（スクロール効果を見るには、ブラウザの幅を小さくする必要があります）。 stackoverflowの上で見つかったhttps://jsfiddle.net/ev5nzm6o/5/：私は、次のフィドルを使用しています

#gall { 
    margin: 0 auto; 
    width: 70%; 
    padding: 90px 0 90px 0; 
    overflow: auto; 
} 

.gallery { 
    display: flex; 
    flex-wrap: wrap; 
    align-content: flex-start; 
    justify-content: flex-start; 
    height: 100vh; 
} 

.gallery a { 
    flex-grow: 1; 
    flex-basis: 125px; 
    max-width: 200px; 
    margin: 10px; 
} 

.gallery .gallery-item.filler{ 
    display: none; 
} 
.gallery.equalsize .gallery-item.filler{ 
    display: initial; 
    visibility: hidden; 
} 

.gallery-item img { 
    height: 100%; 
    width: 100%; 
    padding: 30px 30px 30px 30px; 
    display: block; 
} 

：ここ

は私がギャラリーを設定するCSSです。

私が理想的に思うのは、ギャラリーのサムネイル領域に垂直スクロールがないことですが、すべての画像を保持できるように高さを上げることができませんでした。私は何かが明らかでないことを感じています。

サムネイルが4つしかないパーソナルプロジェクトギャラリーエリアの下には、多くの空白があります。その部分の下のスペースを減らすことは可能ですか？

何か助けや助言をいただければ幸いです。私はまだ試行錯誤で学んでいることに留意してください。しかし、私はこの権利を得たいと思います。 :)ありがとう。

Answer 1

がoverflowを取り除くために、.galleryから

height: 100vh; 

を削除し、それがheight:autoにデフォルト設定されます。

さまざまな理由で、そのセクションの高さを少なくとも100vhにする場合は、height:100vhをmin-height: 100vhに置き換えます。

"パーソナルプロジェクト" 以下の余分なスペースがから構成されて

---

：

• #container99 { margin: 0 0 60px 0;} /* style.css:178 */
• #container98 { margin: 40px 0 40px 0;} /* style.css:171 */
• #gall { padding: 90px 0 90px 0; } /* style.css:134 */

それぞれが総額、margin-bottomまたはpadding-bottomのいずれかを追加そのスペース。結果に満足するまで、下の余白の値を低く設定するか、それらの要素のパディングプロパティを設定します。