HTMLテンプレートからウェブサイトを構築しました。 フッターを固定位置から削除し、インデックスページのヘッダーとフッターの間に画像を完全な高さで表示しようとしています。現在、画像はヘッダーとフッターの後ろに隠れています。私のウェブサイトのリンク http://vizoviphotography.com。 これをどのように解決するかについての提案はありますか?
回答:
回答№1は0あなたが直面している問題は、あなたが使用したことです
.epic-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
そして
.epicSlider.slider-wrapper {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%; /* this really is a problem */
top: 2px;
left: 1px;
}
これらは常にスライダーを体の100%に満たすようにします
まず、.epic-wrapperスタイルからheight:100%を削除して相対的なものにし、#wrapperの上部にあるパディングを削除します。
.epic-wrapper {
position: relative;
width: 100%;
}
.no-touch #wrapper {
/* padding-top: 130px; */
}
次に、JQueryを少し書くことをお勧めします「サイズ変更」にフックし、「。slider-wrapper」の高さを動的に計算します。 (体の高さ-(ヘッダーの高さ+フッターの高さ))を取得し、その計算値を.epicSlider.slidewrapper(または必要に応じて#epicSlider)の高さに適用する必要があります。マージンと境界線を考慮することを忘れないでください。
のようなものを取得する
.epicSlider.slider-wrapper {
position: absolute;
overflow: hidden;
width: 100%;
height: 670px;
top: 2px;
left: 1px;
}
ユーザーがウィンドウをドラッグしたときにそれに応じて高さが調整されるように、サイズ変更を処理する必要があります。