ミックスIt Jquery Gallery Not Pushing Content Below

Question

私はMix It Upと呼ばれるjQueryギャラリープラグインを使用していますが、下のフッタなどのコンテンツをプッシュするのに失敗しています。

このギャラリーがどのように設定されているかは、ギャラリーを構成するために背景が適用されたdiv要素がいくつかあることです。あなたが最初にページをロードするときは、すべて（デスクトップデバイスからロードする場合）は問題ありません。しかし、ページ幅を減らすにつれて、ギャラリーのレイアウトを変更しました。例えば、全幅では、行あたり4つの要素があり、下位のブレークポイントには2つの要素があります。このため、より低いブレークポイントでは、ギャラリーの高さが変更され、1行あたりのアイテム数が少なくなります。これは、私のフッターがギャラリーの下にははや押し下げられていないことを意味します。ここで

は、私のギャラリーのためのHTMLです：

<section id="portfolio"> 
    <div class="portfolio-title h1"> 
    <h2>My <span>Work</span></h2> 
    <hr/> 
    </div> 
    <div class="gallery-filters"> 
    <div class="filter" data-filter="all"><img src="asset/Portfolio/loupe.png" alt="View All"/><p>ALL</p></div> 
    <div class="filter" data-filter=".category-1"><img src="asset/Portfolio/web.png" alt="Website Design"/><p>WEB</p></div> 
    <div class="filter" data-filter=".category-2"><img src="asset/Portfolio/graphic design.png" alt="Graphic Design"/><p>GRAPHIC</p></div> 
    <div class="filter" data-filter=".category-3"><img src="asset/Portfolio/picture.png" alt="Content Creation"/><p>CONTENT</p></div> 
    </div> 
    <div class="portfolio-container"> 
    <div class="p1 p-content category-1 mix" data-myorder="1"><div></div></div> 
    <div class="p2 p-content category-1 mix" data-myorder="3"><div></div></div> 
    <div class="p3 p-content category-1 mix" data-myorder="2"><div></div></div> 
    <div class="p4 p-content category-1 mix" data-myorder="5"><div></div></div> 
    <div class="p5 p-content category-1 mix" data-myorder="4"><div></div></div> 
    <div class="p6 p-content category-2 mix" data-myorder="6"><div></div></div> 
    <div class="p7 p-content category-3 mix" data-myorder="8"><div></div></div> 
    <div class="p9 p-content category-3 mix" data-myorder="7"><div></div></div> 
    </div> 
</section> 

、ここでは私のギャラリーのためにCSSです：

/*Portfolio Section */ 
#portfolio{ 
    width: 100%; 
    height: auto; 
} 
.portfolio-title{ 
    text-align: center; 
    padding-top: 20px; 
} 
.portfolio-title h2{ 
    color: black; 
    font-weight: 300; 
    margin-top: 15px; 
} 
.portfolio-title hr{ 
    width: 50px; 
    background-color: black; 
    height: 3px; 
    margin-top: 40px; 
    margin-bottom: 40px; 
} 
.portfolio-container{ 
    width: 100%; 
    height: 500px; 
    font-size: 0; 
    margin-top: 40px; 
} 
.portfolio-container div{ 
    width: 25%; 
    height: 50%; 
    background-color: #363636; 
    display: inline-block; 
    vertical-align: top; 
    border: 1px solid rgba(0, 0, 0, 0.2);; 
    box-sizing: border-box; 
} 
.filter{ 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    border-radius: 360px; 
    border: 1px solid black; 
    cursor: pointer; 
    margin: 10px 20px 10px 20px; 
} 
.filter p{ 
    font-size: 13px; 
    margin-top: 5px; 
} 
.filter img{ 
    width: 40px; 
    height: 40px; 
    margin-top: 15px; 
} 
.gallery-filters{ 
    width: 100%; 
    text-align: center; 
} 
.portfolio-container .mix{ 
    display: none; 
} 
.p-content div{ 
    position: relative; 
    display: block; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    -moz-transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 
} 
.p-content div:hover{ 
    opacity: 0.7; 
} 
/*Gallery Images */ 
.p-content{ 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
} 
.p1{ 
    background-image: url('asset/Portfolio/web/thewebcreator.png') 
} 
.p2{ 
    background-image: url('asset/Portfolio/web/lussoegusto.png') 
} 
.p3{ 
    background-image: url('asset/Portfolio/web/akrams.png') 
} 
.p4{ 
    background-image: url('asset/Portfolio/web/adaptive-flair.png') 
} 
.p5{ 
    background-image: url('asset/Portfolio/web/codeacation.png'); 
} 

I私は上記のように多くのコードを含めました理由は、適切な提供することですコンテキスト。加えて。サイトHEREにアクセスした場合は、開発者ツールを使用してさらに検査することができます。私は解決策が簡単だと確信しています。

しかし、複雑さを増やすために、ギャラリーセクションの高さは、画像が除外されるにつれて動的に変化することがあります。つまり、ギャラリーの高さを自動的に設定する方法が必要です。

私はこれを理解するために2時間を費やしました。何か案は？

Answer 1

あなたは、コンテナの固定500pxなどの高さがあります。

.portfolio-container { 
    ... 
    height: 500px; 
    ... 
} 

をそして、あなたは子要素（グリッド項目）のための割合に基づく高さ設定：あなたはを削除場合

.portfolio-container div { 
    ... 
    height: 50%; 
    ... 
} 

を固定高さが.portfolio-containerとからに固定された高さを.portfolio-container divから250pxに追加すると、Mix It Upプラグインは自動的にコンテナのサイズを現在表示されている要素の数に対応します。