コンテンツがオーバーフローした場合にスクロールする必要がある固定位置のdivがある

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

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

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

コンテンツがdivに対して高すぎる場合、どうすれば垂直にスクロールできますか？

それは私にスクロールバーを表示したくないという他の問題を引き起こします...しかし、私はすでにその答えを持っていると思います（divをスクロールできないため、まだ動作しません）はじめに）。

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

JS Fiddleの例

そして、問題を引き起こしている関連コード（ここにすべてを投稿すると長すぎるので）：

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

height：100％も追加してみて、それが問題であるかどうかを確認しましたが、どちらも機能しませんでした。

を使用する際の問題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/

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

まず、固定サイドバーについて、オーバーフローする高さを指定する必要があります。

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の高さを超えている場合、スクロールバーを取得しないことは不可能です。これが、画面の高さに関するメディアクエリを追加した理由です。おそらく、スクロールを表示する必要がないように、短い画面サイズに合わせてスタイルを調整できます。

乾杯、イグナシオ

一般的に言えば、固定部分はで設定する必要がありwidth、heightかつtop、bottomそれ以外の場合は、そのサイズと位置を認識しません、プロパティ。

使用されているボックスがボディの直接の子であり、隣接している場合z-index、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;
}

それが誰かを助けることを願っています。ありがとうございました！

私が反応コンポーネントをスタイリングしているので、ここでのソリューションは私にとってはうまくいきませんでした。

サイドバーでうまくいったのは

.sidebar{
position: sticky;
top: 0;
}

これが誰かを助けることを願っています。

似たようなことをしたいが、私がしたいように、水平方向に探している人のために答えを残します。

以下のように@ 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