ビューポートの高さを超えた場合にのみ、固定要素のコンテンツをスクロール可能にするにはどうすればよいですか？

Question 1

私がしているdivに位置しfixed、メニューやナビゲーションリンクを含む、Webページの左側にあります。cssから設定された高さはなく、コンテンツによって高さが決まり、幅は固定されています。問題は、コンテンツが多すぎると、divウィンドウの高さよりも大きくなり、コンテンツの一部が表示されなくなることです。（位置があるので、ウィンドウをスクロールすると、ヘルプがないfixedし、divスクロールしません。）

設定してみました overflow-y:auto;が、それも役に立ちません。divは、その一部がウィンドウの外にあることに気付いていないようです。

divハングがウィンドウの外にぶら下がっている場合、必要な場合にのみコンテンツをスクロール可能にするにはどうすればよいですか？

Question 2

あなたはおそらくできません。これが近づいています。下にスペースがあると、コンテンツがその周りを流れることはありません。

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

高さのパーセンテージも実行できます。

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}

Question 3

以下のリンクは、私がこれをどのように達成したかを示しています。それほど難しいことではありません-賢いフロントエンド開発者を使用する必要があります!!

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       Menu HTML goes in here

    </div>

</div>

http://jsfiddle.net/RyanBrackett/b44Zn/

Question 4

おそらく内部divが必要です。cssの場合：

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}

Question 5

あなたのposition：fixed要素でこれを試してください。

overflow-y: scroll;
max-height: 100%;

Question 6

これは、フレックスボックスの魔法で絶対に実行できます。このペンを見てください。

このようなCSSが必要です：

aside {
  background-color: cyan;
  position: fixed;
  max-height: 100vh;
  width: 25%;
  display: flex;
  flex-direction: column;
}

ul {
  overflow-y: scroll;
}

section {
  width: 75%;
  float: right;
  background: orange;
}

これはIE10 +で機能します

Question 7

これが純粋なHTMLとCSSのソリューションです。

位置が固定されたナビゲーションバーのコンテナボックスを作成します。高さ：100％;
次に、高さが100％の内箱を作成します。オーバーフロー-y：スクロール;
次に、そのボックスの中にコンテンツを出します。

コードは次のとおりです。

.nav-box{
        position: fixed;
        border: 1px solid #0a2b1d;
        height:100%;
   }
   .inner-box{
        width: 200px;
        height: 100%;
        overflow-y: scroll;
        border: 1px solid #0A246A;
    }
    .tabs{
        border: 3px solid chartreuse;
        color:darkred;
    }
    .content-box p{
      height:50px;
      text-align:center;
    }

<div class="nav-box">
  <div class="inner-box">
    <div class="tabs"><p>Navbar content Start</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content End</p></div>
    </div>
</div>
<div class="content-box">
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</div>

スニペットを展開

jsFiddleへのリンク：

Question 8

私はこれを解決策ではなく回避策として提示しています。これは常に機能するとは限りません。非常に奇妙な環境で、内部使用のために非常に基本的なHTMLページを作成しているので、このようにしました。本当に素晴らしいナビゲーションバーを実行できるMaterializeCSSのようなライブラリがあることを私は知っています。（私はそれらを使用するつもりでしたが、それは私の環境では機能しませんでした。）

<div id="nav" style="position:fixed;float:left;overflow-y:hidden;width:10%;"></div>
<div style="margin-left:10%;float:left;overflow-y:auto;width:60%;word-break:break-all;word-wrap:break-word;" id="content"></div>

Question 9

これを固定高さのコードに追加し、1つのスクロールを追加します。

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}

Question 10

あなたの目的のために、あなたはただ使うことができます

position: absolute;
top: 0%;

それでも、サイズ変更、スクロール、応答性があります。