web-dev-qa-db-ja.com

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

私は実際には2つの問題を抱えていますが、もう1つが対処しやすいと私が思うので最初に主要な問題を解決しましょう。

メニューのスクロールの左側に固定位置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;
}

また、高さを100％にしても問題がないかどうかを確認しましたが、うまくいかなかった... 600pxなどの固定の高さでもありませんでした。

javascriptcssscrolloverflowcss-position
124
TCD Factory

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/

213
strider820

これは両方とも修正です。

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

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

乾杯、イグナシオ

4
ignacioricci

一般的に、固定セクションは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;
}

それが誰にも役立つことを願っています。ありがとうございました！

0
Lefan

私がやりたかったように、水平の方向に似たようなことをやろうと思っている人に答えを残すこと。

微調整 @ strider82 以下のような答えが魔法をかけるでしょう。

.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;
}

それでおしまい。 comment where @ train もoverflow:autoよりもoverflow:scrollを使って説明していることも確認してください。

0
Siddhesh T