質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

6321閲覧

【css】サイドバーを内部スクロールかつ、position: stickyを適用させたい

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2019/01/10 08:30

編集2019/01/11 02:06

やりたいこと

以下のようなhtmlで、
サイドバーには

  • 画面の高さ100%
  • position: stickyのように固定
  • overflow-y: scrollを適用

を適用させたい

<header class="l-header">header</header> <div class="l-container"> <aside class="l-sidebar"> <div class="l-sidebar__inner"> <ul> <li class="l-sidebar__item">menu</li> <li class="l-sidebar__item">menu</li> <li class="l-sidebar__item">menu</li> <li class="l-sidebar__item">menu</li> <li class="l-sidebar__item">menu</li> <li class="l-sidebar__item">menu</li> <li class="l-sidebar__item">menu</li> <li class="l-sidebar__item">menu</li> <li class="l-sidebar__item">menu</li> <li class="l-sidebar__item">menu</li> <li class="l-sidebar__item">menu</li> <li class="l-sidebar__item">menu</li> </ul> </div> </aside> <main class="l-main"> <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p> <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p> <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p> <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p> <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p> <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p> <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p> <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p> <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p> </main> </div> <footer class="l-footer">footer</footer>
.l-header, .l-footer color: #fff text-align: center height: 50px line-height: 50px background-color: #333 .l-container display: flex .l-sidebar width: 250px min-width: 250px height: 100% &__inner width: 250px min-width: 250px height: 100% position: fixed top: 50px left: 0 overflow-y: scroll background-color: #f00 &__item padding: 20px .l-main width: calc(100% - 250px) background-color: #eee

上記のhtmlとsassでの問題点

  • スクロールしたら、サイドバーの上に隙間が空いてしまう(ヘッダーの高さ分、topで下にずらしているから)
  • 下までスクロールしたら、fixedで固定している箇所(左側)がフッターの上に来てしまう

試したこと

  • position: stickyとoverflow-y: scrollの共存が不可能(親にposition、子にoverflowでも無理)だった
  • stickyではなくfixedで固定させようとしたら、下までスクロールした時にフッターの上にかぶってしまい、フッターが一部隠れてしまう
  • サイドバーに背景色がついているから、高さを100%にしなければフッターとサイドバーとの空間に隙間が空いているように見えてしまう(vh100%など試してみたが駄目だった)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2019/01/10 09:30

現状の CSS を追記していただけませんか?
退会済みユーザー

退会済みユーザー

2019/01/11 02:06

サンプルを追記しました!よろしくお願い致します。
guest

回答2

0

ベストアンサー

s8_chu

2019/01/13 23:48

回答するほど自信がないので、この回答にコメントします(ごめんなさい)。
こんな感じでしょうか?
https://codepen.io/anon/pen/rooeWg

s8_chu様のコメントで無事解決いたしました。

投稿2019/01/22 02:14

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

このような構造ではどうでしょうか?

html

1<!doctype html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6</head> 7<body> 8 <main> 9 <article> 10 <header> 11 <h1>header</h1> 12 </header> 13 <div class="content"> 14 <section> 15 section-1 16 </section> 17 <section> 18 section-2 19 </section> 20 <section> 21 section-3 22 </section> 23 </div> 24 </article> 25 <aside> 26 <div class="inner"> 27 sidebar 28 </div> 29 </aside> 30 </main> 31 <footer> 32 footer 33 </footer> 34</body> 35</html> 36

css

1* { 2 margin: 0; 3 padding: 0; 4} 5 6main { 7 display: flex; 8} 9 10article { 11 background: #afafaf; 12 flex: auto; 13} 14 15header { 16 background: #00f; 17 width: 100%; 18 height: 100px; 19} 20 21section { 22 border: 5px solid #000; 23 height: 200px; 24 margin-bottom: 10px; 25} 26 27aside { 28 background: #f00; 29 width: 200px; 30 height: 1000px; 31 overflow-y: scroll; 32} 33 34.inner { 35 background: #fff; 36 height: 1200px; 37 margin: 50px 10px; 38} 39 40footer{ 41 background: #ccc; 42 width: 100%; 43 height: 100px; 44} 45

修正

jquery使える場合、これでどうでしょうか?

html

1<!doctype html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6 <link rel="stylesheet" href="ファイル名.css"> 7 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> 8</head> 9<body> 10 <header> 11 <h1>header</h1> 12 </header> 13 <main> 14 <aside> 15 <div class="inner"> 16 sidebar 17 </div> 18 </aside> 19 <article> 20 <div class="content"> 21 <section> 22 section-1 23 </section> 24 <section> 25 section-2 26 </section> 27 <section> 28 section-3 29 </section> 30 <section> 31 section-4 32 </section> 33 </div> 34 </article> 35 </main> 36 <footer> 37 footer 38 </footer> 39 <script> 40(function() { 41 var asideHeight = $('aside').outerHeight(); 42 43 $(window).scroll(function() { 44 var scroll = $(window).scrollTop(); 45 var footerTop = $('footer').offset().top; 46 var windowHeight = $(window).height(); 47 48 if (scroll <= 50) { 49 $('aside').css({ 50 top:50 - scroll, 51 height:asideHeight + scroll 52 }); 53 } 54 55 if(scroll >= footerTop - windowHeight) { 56 $('aside').css({height:windowHeight - scroll + footerTop - windowHeight}); 57 } 58 59 }) 60 61})(); 62</script> 63 64</body> 65</html>

css

1* { 2 margin: 0; 3 padding: 0; 4} 5 6html,body { 7 height: 100%; 8} 9 10main { 11 display: flex; 12} 13 14article { 15 background: #afafaf; 16 width: calc(100% - 250px); 17 margin-left: 250px; 18} 19 20header { 21 background: #00f; 22 width: 100%; 23 height: 50px; 24} 25 26section { 27 border: 5px solid #000; 28 height: 200px; 29 margin-bottom: 10px; 30} 31 32aside { 33 background: #f00; 34 width: 250px; 35 height: calc(100% - 50px); 36 position: fixed; 37 top: 50px; 38 bottom: 50px; 39 overflow-y: scroll; 40} 41 42.inner { 43 background: #fff; 44 height: calc(100% + 200px); 45 margin: 50px 10px; 46} 47 48footer{ 49 background: #333; 50 width: 100%; 51 height: 50px; 52}

投稿2019/01/11 02:43

編集2019/01/11 12:00
akihiro3

総合スコア955

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

akihiro3

2019/01/11 02:48

headerはasideの上に来るべきでしたら、 headerをmainの上に移動してくださいね。
退会済みユーザー

退会済みユーザー

2019/01/11 03:15 編集

スクロールしたらサイドバーは固定したいです。現状のだと、メインをスクロールしたらサイドバーもスクロールしてしまうので私が求めているものとは差異があります。。。 それと、heightとpx指定すると、コンテンツが増えた場合崩れてしまいます。
akihiro3

2019/01/11 12:02

完成イメージが理解できてないようですみません。 jquery使用になりますが、修正コードを追記しました。 jqueryは使えますでしょうか?
退会済みユーザー

退会済みユーザー

2019/01/22 02:13

s8_chu様 ご教授頂いたcodepenのsass通りに修正したら思い通りの動きになりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問