ウェブページの左側にdiv
を配置したfixed
があり、メニューおよびナビゲーションリンクが含まれています。 cssから設定された高さはありません。コンテンツによって高さが決まり、幅が固定されます。問題は、コンテンツが多すぎる場合、div
がウィンドウの高さより大きくなり、コンテンツの一部が表示されないことです。 (位置がfixed
であり、div
がスクロールしないため、ウィンドウをスクロールしても役に立ちません。)
overflow-y:auto;
を設定しようとしましたが、それでも助けにはなりません。divは、その一部がウィンドウの外側にあることに気付かないようです。
div
がウィンドウの外に出た場合、必要な場合にのみコンテンツをスクロール可能にするにはどうすればよいですか?
おそらくできません。これが近づいてくるものです。下にスペースがある場合は、コンテンツが周囲に流れません。
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%;
}
以下のリンクは、私がこれをどのように達成したかを示しています。それほど難しくありません-賢いフロントエンド開発者を使うだけです!!
<div style="position: fixed; bottom: 0%; top: 0%;">
<div style="overflow-y: scroll; height: 100%;">
Menu HTML goes in here
</div>
</div>
おそらく内部divが必要です。 CSSの場合:
.fixed {
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
width: 200px; // your value
}
.inner {
min-height: 100%;
}
Position:fixed要素でこれを試してください。
overflow-y: scroll;
max-height: 100%;
これが純粋なHTMLおよびCSSソリューションです。
位置を指定してnavbarのコンテナボックスを作成します。高さ: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>
私はこれをソリューションではなく回避策として提示しています。これは常に機能するとは限りません。非常に奇妙な環境で、内部で使用するための非常に基本的なHTMLページを作成しているので、このようにしました。 MaterialiseCSSのような、本当にすてきなナビゲーションバーを実行できるライブラリがあることは知っています。 (私はそれらを使用するつもりでしたが、私の環境では機能しませんでした。)
<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>
これをコードに追加して高さを固定し、スクロールを1つ追加します。
.fixedbox {
max-height: auto;
overflow-y: scroll;
}