html - スクロールバーなしでdivの背景でページを埋める

Question

クラスの「パネル」と白い背景を表示可能領域の下部まで伸ばし、スクロールバーを表示しないようにしたいdiv（コンテンツがビューポートを超える場合にのみスクロールバーを表示する）

これが私が取り組んでいた例です。

http://jsfiddle.net/VUP72/

私は試した ：

.panel{
  height: 100%;
}

ただし、100% + ヘッダーなので、スクロールが表示されます。スクロールバーなしでページを埋めるにはどうすればよいですか?

Answer 1

これをcssに追加してみてください：

body {
    overflow: hidden;
}

この方法では、スクロールバーを取得することはありません。別の方法は、calcを使用することです。

.panel {
    min-height: calc(100% - 20px);
}

ヘッダーの高さを20px変更します。これがすべてのブラウザで機能するかどうかはわかりませんが、試してみる必要があります。

Answer 2

単純なcssでこれを実行できるかどうかはわかりません。モニターごとに高さが異なるため、javascriptやjqueryなどを使用してモニターの高さを取得し、その範囲外になったらスクロールを表示する必要があると思います。これがあなたが探しているものであるかどうかは本当にわかりません

Answer 3

Flexbox を見ずに、特定の要素が実際よりも大きいという錯覚を与えるために要素のスタイルを設定する方法について、もう少し創造的になる必要があります。body要素はコンテナであり、要素とは独立してスタイルを設定できることを忘れないでくださいhtml!

http://jsfiddle.net/VUP72/4/

html, body {
  min-height: 100%;
  background: black;
}

html {
  min-width: 400px;
}

body {
  width: 300px;
  margin: auto;
  position: relative;
}

header, .sub-header{
  height: 30px;
}

.panel-top, .panel{
  width: 200px;
  margin: auto;
}

footer{
  position: fixed;
  bottom: 0;
  width: inherit;
}

/*COLORS to indentify*/
header{ background: red; }
#footer{ background: blue;}
body{ background: white; }
.sub-header { background: grey }
.container{background: yellow;}
.panel-top{background: #f0f0f0;}
.panel{background: white;}

Answer 4

次のように、ヘッダーをメイン コンテナー内に配置できます。

<div id="main">
  <header>Header</header>
  <div class="sub-header">SUB-header</div>
  <div class="container">
    <div class="panel-top">TOP PANEL</div>
    <div class="panel">PANEL 
      <div>My contente should appear here ...</div>
    </div>
  </div>
</div>
<footer><div id="footer">Footer</div></footer>

次に、ページ全体でスクロールします。これを望まない場合は、ヘッダーに position:static を指定し、top:0px と left:0px を指定できます。

Answer 5

これを試して：

 background-repeat: repeat-y;

お役に立てれば！

Answer 6

Height本体から取り外します。これがお役に立てば幸いです。