javascript - カスタムスクロールバーを使用したjQuery変数の幅から高さへの調整

Question

jQueryを使用してブラウザウィンドウのサイズ変更に基づいて高さを変更することに関するいくつかの投稿を読みました。これには、ウィンドウサイズを監視し、「インライン」スタイルを幅サイズから定式化された新しい高さに更新することが含まれます。ただし、発見されたすべてのソリューションは機能しません。似ているが同じではないものが必要なためです。基本的には、サイズを変更する内部要素が必要です。

したがって、HTML コードは次のようになります。

<header> </header>
<div class="mainbox">
    <div class="custombar"> </div>
    <div class="contentContainer">
        <div class="contentOne"> </div>
        <div class="contentTwo"> </div>
        <div class="ContentThree"> </div>
    </div>
    <div class="contentFooter">
        <ul>
            <li><a href="#">Nav 1</a></li>
            <li><a href="#">Nav 2</a></li>
            <li><a href="#">Nav 3</a></li>
        </ul>
    </div>
</div>
<footer> </footer>

CSS は次のようになります。

.header{height:135px;width:100%;background:#000;}
.mainbox{width:100%;height:500px;background:#ccc;}
.footer{height:135px;width:100%;background:#000;}

今、固定ヘッダー、固定位置を使用しない固定ボトムの解決策を認識していますが、誰かが銃をジャンプする前に、すぐに説明することをもう少しサポートする拡張バージョンを探しています.

これは、私にとって複雑であるか、少なくとも

基本的に、ブラウザウィンドウのサイズに基づいて高さを更新するjQueryスクリプトが必要なので、コンテンツdivが1つだけ表示されるようにするため、3色を考え、下にスクロールすると別の色が表示されますが、1つだけこれはオフセットと私がよく知っている名前を使用して行うことができますが、これはウィンドウのサイズを変更しないため、1 つの要素のみが表示されます。

これが私が何を求めているのかをもう少し説明してくれることを期待して、いくつかの画像をまとめました...

スライド例1

上記の画像とテキスト形式から次のことを考慮してください

ヘッダーは常に表示されます
内部コンテンツはブラウザでサイズ変更されます
スクロールしてもナビゲーションリンクは常に表示されます
フッターを常に表示

スライドの別の例

スライド例 2

上の画像からわかるように、コンテンツはスライドしますが、最も重要なことはサイズが変更され、go to と 100% の高さを使用することで、スライドが 1 つだけ表示されることです。

幅と高さの変更

ユーザーにスクロールさせてコンテンツをトリミングさせたい場合、ソリューションを投入するのは非常に簡単ですが、コンテンツは軽く、1 枚のスライドしか表示されない場合でもうまく機能します。

理解

ある時点で、中央のコンテンツが小さすぎて正しくレンダリングされないことはわかっていますが、これは問題ありません。メディアクエリを使用して X 幅になったら機能をオフにします。 jQuery フロントの小さなボードで申し訳ありませんが、私の長所ではありません。誰かが jFiddle などを一緒にウィズしたり、すでに作成されたものの方向性を教えてくれることを願っています。

min-height を使用するなど、この問題へのより簡単なアプローチがあるかもしれません。すべての投稿のマンモスに対する PS、それは私の意図ではありませんでした ;)

javascript - カスタムスクロールバーを使用したjQuery変数の幅から高さへの調整

1 に答える 1

Related

Reference