[解決済み] 固定要素の内容がビューポートの高さを超えたときだけスクロールできるようにするにはどうしたらいいですか?
2022-09-22 08:28:09
質問
私は
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の高さを画面の残りスペースで埋めるようにする
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] 絶対位置指定された要素をdivの中央に配置するにはどうしたらよいですか?
-
[解決済み] CSSコンテンツによるHTMLエンティティの追加
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] 複数のノンブレイキングスペース("nbsp")ではなく、タブスペースを使用しますか?
-
[解決済み] HTML5で(非空白の)自己閉鎖タグは有効ですか?
-
[解決済み] 残りの幅を埋めるためにdivを展開する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] slackのチームIDやチャンネルIDを調べる最も簡単な方法は何ですか?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか?
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み] 検索エンジンはAngularJSアプリケーションをどのように扱っているのか?