191

私は実際には 2 つの問題を抱えていますが、最初に主要な問題を解決しましょう。

メニューのスクロールの左側に固定位置の div があります。右側は、適切にスクロールする標準の div です。問題は、ブラウザのビューポートが小さすぎてメニュー全体を表示できない場合です..スクロールする方法が見つからないことです（少なくともcssを使用しないでください）。css でさまざまなオーバーフローを使用してみましたが、何も div をスクロールしません。メニューを含む div は min-height:100% と position:fixed に設定されています。両方の属性を維持する必要があります。

メニューを含む div は、絶対位置に配置され、高さが 100% に設定された別のラッパー div 内にあります。

コンテンツが div に対して高すぎる場合、垂直方向にスクロールするにはどうすればよいですか?

それは私がスクロールバーを表示したくないという別の問題に私を導きます..しかし、私はすでにそれに対する答えを持っているかもしれないと思います(divをスクロールできないため、まだ機能しません)そもそも）。

解決策はありますか？おそらくjavascriptが必要ですか？（私はほとんど知りません）

JS フィドルの例

および問題を引き起こしている関連コード (ここにすべてを投稿すると長すぎるため):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

また、それが問題であるかどうかを確認するために height:100% も追加しようとしましたが、機能しませんでした...また、600px などの固定の高さも機能しませんでした。

4

5 に答える 5

311

を使用する際の問題height:100%は、ウィンドウの 100% ではなく、ページの 100% になることです (おそらく予想されるように)。非固定コンテンツは、スクロール バーを必要とせずに高さ 100% の固定コンテンツを含めるのに十分な長さであるため、これにより問題が発生します。ブラウザは、実際にそのバーを下にスクロールして表示できないことを知りません/気にしません

fixedやろうとしていることを達成するために使用できます。

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

あなたのフィドルのこのフォークは私の修正を示しています: http://jsfiddle.net/strider820/84AsW/1/

于 2013-08-21T20:01:18.563 に答える
12

一般に、固定セクションはwidth、heightおよびtop、bottomプロパティで設定する必要があります。そうしないと、サイズと位置が認識されません。

z-index使用されているボックスが body の直接の子であり、隣接するボックスがある場合、プロパティをチェックすることは理にかなっていtop, leftます。それらが互いに重なる可能性があり、コンテンツをスクロールする際のマウス ホバーに影響を与える可能性があるためです。

bodyこれは、モバイル ナビゲーションと共に一般的に使用されるコンテンツ ボックス (タグの直接の子) のソリューションです。

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

それが誰にも役立つことを願っています。ありがとうございました！

于 2019-08-22T13:29:37.450 に答える
8

ここに両方の​​修正があります。

まず、固定サイドバーに関して、オーバーフローする高さを与える必要があります。

HTML コード:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

CSS コード:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

実際の例: http://jsfiddle.net/RWxGX/3/

コンテンツが div の高さからオーバーフローしている場合、スクロール バーを取得しないことは不可能です。そのため、画面の高さのメディア クエリを追加しました。スクロールが表示される必要がないように、短い画面サイズに合わせてスタイルを調整できるかもしれません。

乾杯、イグナシオ

于 2013-04-18T23:46:04.767 に答える
1

私が望んでいたように、似たようなことを横方向にやろうとしている人に答えを残します。

@ strider820の回答を以下のように微調整すると、魔法のようになります。

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

それでおしまい。@trainがoverを使用して説明したこのコメントも確認してください。overflow:autooverflow:scroll

于 2019-04-08T13:42:47.047 に答える