web-dev-qa-db-ja.com

CSS 100％Height、次にページではなくスクロールDIV

わかりましたので、まだ答えのある質問を見つけることができなかったので、自分で作ることにしました。

技術的には、100％流動的なレイアウトを作成しようとしています。 http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php

しかし、今私がしたいのは、ページを高さ100％にすることです...しかし、ページをスクロールさせたくないので、内側のDIVをスクロールさせたいです。

つまり、ビューポート画面の高さを検出し、100％進み、コンテンツが画面よりも長い場合は、ページではなく特定のDIVをスクロールする必要があると信じています。

これが理にかなっていることを願っています。

前もって感謝します。ジャスティン

htmlcssscroll
50
Justin
<html>
  <body style="overflow:hidden;">
    <div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0">
    </div>
  </body>
</html>

それは簡単な場合にそれを行う必要があります

私はこれがあなたのケースに役立つと信じています

<html>
  <body style="overflow:hidden;">
      <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div>
      <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div>
      <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div>
      <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
  </body>
</html>

この例では、静的なヘッダーとフッターを提供し、ナビゲーターとコンテンツ領域をスクロール可能にします。

58
John Hartsock

これはすべてのabsパネルでこれを行う別の方法です。IE6では失敗しますが、それが要件である場合、IE6の回避策CSSを提供できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Fluid Layout</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style rel="stylesheet" type="text/css">
    body { background-color:black; margin:0px; padding:0px; }
    .pageBox { position:absolute; top:20px; left:20px; right:20px; bottom:20px; min-width:200px}
    .headerBox { position:absolute; width:100%; height:50px; background-color:#333; }
    .contentBox { position:absolute; width:100%; top:52px; bottom:32px; background-color:blue; }
    .footerBox { position:absolute; width:100%; height:30px; background-color:#ccc; bottom:0px; }        
    .contentBoxLeft { position:absolute; width:20%; height:100%; background-color:#b6b6b6; }
    .contentBoxRight { position:absolute; width:80%; left:20%; height:100%; background-color:white; }    
    .contentBoxLeft,
    .contentBoxRight { overflow:auto; overflow-x:hidden; }
 </style>
 </head>
<body>&nbsp;
    <div class="pageBox">
        <div class="headerBox">Header</div>
        <div class="contentBox">
            <div class="contentBoxLeft">ContentLeft asdf asdf adsf assf</div>
            <div class="contentBoxRight">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />asdfsad ff asdf asdfasd</div>
        </div>
        <div class="footerBox">Footer</div>
    </div>
</body>
</html>
9
David

overflow:auto div

6
Mahesh Velaga

overflow：auto; DIVスタイルについてスクロールを表示できるように、divのサイズを大きくする必要があることを知っておく必要があります。ページのサイズを大きくすると（本文でstyle = "overflow：hidden;"を使用する必要があります）、機能しません。

2
Gabriel Guimarães

これを試すことができます：

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style rel="stylesheet" type="text/css">
    .modal{width:300px;border:1px solid red;overflow: auto;opacity: 0.5;z-index:2;}
    .bg{background:-webkit-linear-gradient(top,red,green,yellow);width:1000px;height:2000px;top:0;left:0;}
    .btn{position:fixed;top:100px;left:100px;}
 </style>
 </head>
<body style='padding:0px;margin:0px;'>
        <div class='bg' style='position:static'></div>
        <div class='modal' style='display:none'></div>
        <button class='btn'>toggle </button>
</body>
<script>
        var str='',count=200;
        while(count--){
                str+=count+'<br>';
        }
        var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'),
        btn=document.querySelector('.btn'),body=document.querySelector('body');
        modal.innerHTML=str;
        btn.onclick=function(){
                if(bg.style.position=='fixed'){
                        bg.style.position='static';
                        window.scrollTo(0,bg.storeTop);
                }else{
                        let top=bg.storeTop=body.scrollTop;
                        bg.style.position='fixed';
                        bg.style.top=(0-top)+'px';
                }
                modal.style.display=modal.style.display=='none'?'block':'none';
        }
</script>
</html>
0
詹特维

Position：absoluteを使用したくない場合（マージンをすべてゼロとは異なるものにする必要がある場合、印刷が台無しになるため）、少しのJavaScriptで実行できます。

Divがスクロールできるように、bodyとdivをセットアップします。

<body style='overflow:hidden'>
  <div id=scrollablediv style='overflow-y:auto;height:100%'>
    Scrollable content goes here
  </div>
</body>

この手法は、高さが設定されているdivに依存するため、JavaScriptが必要です。

スクロール可能なdivの高さをリセットする簡単な関数を作成します

function calculateDivHeight(){
  $("#scrollablediv").height(window.innerHeight);
}

そして、ページの読み込みとサイズ変更の両方でこの関数を呼び出します。

// Gets called when the page loads
calculateDivHeight();

// Bind calculate height function to window resize
$(window).resize(function () {
  calculateDivHeight();
}
0
Vincent