HTMLページのスクロールに関する問題のCSS / Javascriptソリューションを探しています。

div、ヘッダー、ラッパーdivを含む3つのdivがあります。

ラッパーdivに垂直スクロールバーが必要です。高さは自動またはコンテンツに基づいて100％にする必要があります。

ヘッダーは修正する必要があり、全体的なスクロールバーは必要ないのでoverflow:hidden、bodyタグで指定しました。

ラッパーdivに垂直スクロールバーが必要です。どうすれば修正できますか？

HTML

<div id="container">

    <div class="header"></div>

    <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
        <!-- Lots more paragraphs-->
    </div>

</div>

CSS

body{ margin:0; padding:0; overflow:hidden; height:100%}
#container { width:1000px; margin:0 auto;}
.header { width:1000px; height:30px; background-color:#dadada;}
.wrapper{ width:1000px; overflow:scroll; position:relative;}

このJSフィドルを参照してください

heightCSSプロパティがありません。

追加すると、スクロールバーが表示されます。

.wrapper{ 
    // width: 1000px;
    width:600px; 
    overflow-y:scroll; 
    position:relative;
    height: 300px;
}

JSFIDDLE

ドキュメントから：

overflow-y

overflow-y CSSプロパティは、コンテンツが上端と下端でオーバーフローしたときに、コンテンツをクリップするか、スクロールバーをレンダリングするか、ブロックレベル要素のオーバーフローコンテンツを表示するかを指定します。

解決策は、のheight:100%;すべての親要素にも追加すること.wrapper-divです。そう：

html{
    height: 100%;
}

body{ 
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}

#container{
    width:1000px;
    margin:0 auto;
    height:100%;
}

.wrapperクラスに高さを追加した場合、スクロールなしでheightは機能しません。

これを試してください http://jsfiddle.net/ZcrFr/3/

CSS：

.wrapper {
  position: relative;
  overflow: scroll;
  width: 1000px;
  height: 800px;
}

あなたはdivに高さを与えませんでした。したがって、コンテンツが追加されると自動的に伸縮します。修正の高さを指定すると、スクロールバーが表示されます。

ヘッダーに静的な高さを設定すると、ラッパーのサイズの計算にそれを使用できます。

http://jsfiddle.net/ske5Lqyv/5/

サンプルコードを使用して、次のCSSを追加できます。

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#container {
  height: 100%;
}

.header {
  height: 64px;
  background-color: lightblue;
}

.wrapper {
  height: calc(100% - 64px);
  overflow-y: auto;
}

または、より動的なアプローチのためにflexboxを使用できます http://jsfiddle.net/19zbs7je/3/

<div id="container">
  <div class="section">
    <div class="header">Heading</div>
    <div class="wrapper">
      <p>Large Text</p>
    </div>
  </div>
</div>

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.header {
  height: 64px;
  background-color: lightblue;
  flex-shrink: 0;
}

.wrapper {
  flex-grow: 1;
  overflow: auto;
  min-height: 100%; 
}

さらに洗練されたものにしたい場合は、この質問に対する私の応答を見て くださいhttps://stackoverflow.com/a/52416148/1513083

私はあなたを編集しました：フィドル

html, body{ margin:0; padding:0; overflow:hidden; height:100% }
.header { margin: 0 auto; width:500px; height:30px; background-color:#dadada;}
.wrapper{ margin: 0 auto; width:500px; overflow:scroll; height: 100%;}

htmlタグに100％の高さを与えることが解決策です。コンテナーdivも削除しました。レイアウトがこのままの場合は必要ありません。

@Ionica Bizauについてコメントしたかったのですが、評判がよくありません。
JavaScriptコードに関する質問に回答するには：
親の要素の高さ（スペースを占める要素を差し引いたもの）を取得し、それを子要素に適用する必要があります。

function wrapperHeight(){
    var height = $(window).outerHeight() - $('#header').outerHeight(true);
    $('.wrapper').css({"max-height":height+"px"});      
}

注
ウィンドウが1が何FLOATED子供を持っていないか、計算され、正しい高さを取得するための修正を持っている場合、「.container」で置き換えることができます。このソリューションはjQueryを使用します。

Angular2 + Material2 + Sidenavの場合、次のことを行う必要があります。

 ngAfterViewInit() {
   this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden'; 
  }

私の場合、height: 100vh予想される動作でのみ問題を修正します

垂直スクロールバーにこれを試してください：

overflow-y:scroll;