僕の環境からは伸びているように見えないのですが。
ちょっとテキストとソースコードだけでは、認識の齟齬が出てしまうかもしれません。
出来れば不具合状態のキャプチャーもいただければと思います。

わいひらさん

お世話になっております。

キャプチャを添付します。

今アップデートしましたけど、Cocoon自体は問題ないみたいです。

ソースコードを見ても『サイドバースクロール追従 』にはウィジェットが入ってないので、そのようになるのが変ですね。

親テーマの再アップロードを試したり、プラグインを停止してみるとどうなりますか。おそらく前者が怪しそうかも？

かうたっくさん

いつもお世話になっております。

テーマをFTPでアップデートし直してみたのですが、改善しませんでした。

かうたっくさんのサイトでも containar , content , content-in , sidebar の各 idに

style="height: auto !important;

が付与されていますが、付与の仕方が、私は、なんとなく応急的な感じを受けました。

ですので、わいひらさんの見解を待とうと思います。

その style 属性を入れてくる犯人は、おそらく Google AdSense です。Google AdSense の仕様が変わったので、その一環だと思います。

見た限り、Google AdSense をラップする要素に、全て style 属性が入ります。親要素から body タグ直下の要素まで、広告をラップする要素に全部。

なので、対策としては、こんな感じでしょうか。

①サイドバーに Google AdSense を配置しない。

②CSS で何とかする。例えば、こんな CSS。サイドバーの背景色を .sidebar で指定するのではなく、サイドバーに入っているウィジェットなどに指定すればいい。※見た目が少し変わるので微調整が必要。また、変更後の状態をきちんと確認していません。

@media screen and (min-width: 1023px) {
  .no-scrollable-sidebar .sidebar {
    background: transparent;
    padding: 0;
  }
  
  .sidebar .widget,
  .sidebar .ad-area {
    background: #fff;
    margin: 0;
    padding: 19px 29px;
  } 
}

ええっ！！

それは、寝耳に水です。

全く、考えてもいませんんでした。

Akiraさん、有用な情報をありがとうございます。

ご案内の方法を参考に、ちょっと対策を考えます。

しかし、インラインに !important で入れてくるとは・・・

かうたっくさんのサイトでも containar , content , content-in , sidebar の各 idに

style="height: auto !important;

が付与されていますが、付与の仕方が、私は、なんとなく応急的な感じを受けました。

私のサイト、例えばトップ画面など https://bibabosi-rizumu.com/ では仕様だと思います。

サイドバースクロール追従にウィジェットを入れているので。

今見たら別サイトで

アドセンスをサイドバートップを入れて、サイドバースクロール追従に何も入ってない状態ではそうなる。

サイドバーにアドセンスなし。サイドバースクロール追従なし。ならそうなっている模様。詳しく見てないぱっと見だけど。

CSSを入れると領域からはみ出すようです。

スクロール領域が入ってないとき、且つ。サイドバーに広告ウィジェットが入っているときのみスタイル属性をなくす？？って事であればPHPで削除するとか？

もしくは個人単位でstyle属性をCSSで上書きするとか？？

かうたっくさん

この際、サイドバースクロール追従を利用してコンテンツを追加するというのも、有りかもです。

安直な手ではありますけど・・

せっかくAkiraさんにも解決方法をご案内いただいたのですが、すぐに考えがまとまりそうにないです。

なので、このトピックをどうするかは、わいひらさんにお任せということで良いでしょうか？

それにしても、サイト運営者の意図に関わらずスタイル属性が挿入されるこの仕様、んー、どうなんでしょう？・・ ? ? ? ? 

Cocoon自体は、基本的にclassにクラス名を指定して、CSSファイルで指定する形なので、基本的に以下のようなインラインスタイルは入れないように意図的にしています。

style="height: auto !important;"

このようになるのは、やはりスクリプトでスタイルを指定している可能性が高いかと思います。

それにしても、AdSenseがそんな仕様になっていたのは気づいてませんでした。
こればっかりは、AdSense側のスクリプトが!importantを用いてまでインラインに入れているものなので、テーマ側で対応するのは難しいかもしれません。

このサイトでも、サイドバーにAdSenseを入れているので確認してみましたが、確かにインラインスタイルが入っていますね…。
背景が白色だから気づきませんでした。

ただ、いずれにせよAdSenseの意図に反するのは怖いので、変更はないと思います。そのような表示にさせたいのは、AdSenseの強い意志だと思うので。

インラインかつ、!important指定に強い意志を感じます ? 

たしかに。チェックしたらCocoon関係ないですね＾＾

見栄えだけなら以下CSSで対応できそう。

.sidebar {
	background: transparent;
}
.sidebar aside {
	background: #fff;
	box-shadow: 0 0 0 30px #fff;
}

30pxは指定している内側余白。20pxや15pxなどご自身のサイトに合わせればOKかもです。

かうたっくさん

CSSのご提案ありがとうございます。

サイドバーのboxを透明にして、中身のコンテンツの背景色を白にして、box-shadowで外側に白地を膨らませるんですね。

これにAkiraさんご案内の広告エリアを足せば、いけそうな感じもしますが、Cocoonのサイドバーの幅はレスポンシブになっているので、box-shadow（サイドバーの見た目の左右の余白）も可変にしないといけない。

親のboxの○○パーセントで指定しないと可変にならない。

案外、面倒な事に気づきました。

このトピックをご覧になる方のために、ヒントになるCSSを書いてみようかと思ったのですが、適当なものが、いまのところ思いつかないです。

むしろ、『サイドバースクロール追従 』のコンテンツ追加の方が無難のような気もしてきました。

追伸：私の勘違いでした。

私のサイトは子テーマでサイドバーの余白を可変にしていたのを忘れていました。

可変じゃないですね。すみません。

どういうことだろ？

何か不具合がありましたか？どこがオカシイ。って事をハッキリ書いていただければ❦

自分のページで確認したら、私の所はサイドバーのpaddingが19pxだったんで、以下のように追記したら問題ないようです。

.sidebar {
	background: transparent;
	padding-top: 0;
}
.sidebar aside {
	background: #fff;
	box-shadow: 0 0 0 19px #fff;
}

でもサイドバーのpadding-top: 0;を入れたほうがキレイだったんで追記しておきます。

ココが変！って言ってくださいね。気を使ってると、状況がわからないので。

広告エリアを足せば

広告エリアはaside内にあるんで、問題ない気もします。

自動広告はasideの記事一覧などのaタグに紛れ込むので、自動広告もクリアしてるのは自分の記事ページで確認できました。

かうたっくさん

説明させていただきますと、

私のサイトでは、広告がサイドバーの最上部にあるため、aside 内にはなっていないようです。

また、私は自分のサイトの子テーマに以下のようなCSSを書いているのをうっかり忘れていた次第です。

@media screen and (max-width: 1240px){
.sidebar {
padding: 9px 2%;
width: 32.5%;
}
}

また、かうたっくさんのサイトでも、画面幅が1074pxより狭くなると、サイドバーの左右の padding は10pxになるようです。

なので、ご案内の案を採用する場合でも、もう少し修正が必要かなと思った次第です。

以上が説明です。

なお、トピックを立てた当初は、AdSense の仕様などとは思ってもいなかったのですが、Akiraさんの情報や、かうたっくさんのご案内などを受けて、サイドバーの見た目と今後のメンテナンス性のどちらを優先したら良いかを検討しているところです。

いまのところ、かうたっくさんのサイトのように、サイドバースクロール追従のコンテンツを設けた方が、スペースが有効に使えるのでベターなのかなと考えているところです。

また、かうたっくさんのサイトでも、画面幅が1074pxより狭くなると、サイドバーの左右の padding は10pxになるようです。

ですね。

タブレット・モバイルビューの幅で私がチェックしたのは、はみ出していなきゃOK！という感じでした。

どこをどうしたいかが、コチラ側にも伝わる説明があると助かります！

って事で、モバイルの余白を調整している。そしてサイドバートップの広告asideではなく、divの場合限定のCSS。且つ、スマホビューでもサイドバーをmain下に表示させる設定を行っている場合。

@media screen and (min-width: 1241px) {
	.sidebar {
		background: transparent;
	}
	.sidebar aside,
	.sidebar .ad-area {
		background: #fff;
		box-shadow: 0 0 0 30px #fff;
	}
	.sidebar .ad-area {
		margin-top: -9px;
	}
}

これでどこかが変。と思う箇所があれば、また詳細を書いてくださいね。

※.sidebar .ad-area { margin-top: -9px; }　こちらはサイドバーのpaddingが39px。box-shadowの30pxがあるので39-30で9pxに。

あとスマホビューは、左サイドバーのように、右側が長いときなど関係ないので放置で大丈夫だと思われます。おそらく。

この辺りでしたら、誰でもチェックしてくれると思いますので！

https://leafytree.info/toyo-tires-nanoenergy3plus

かうたっくさん

この度は、ご自分のサイトでテストまでしてくださり、より工夫したCSSのご提案をいただき、ありがとうございます。

せっかく、お手間をかけていただいたのに、大変こころ苦しいのですが、前述のように子テーマでスタイルを変更（サイドバーの左右 padding を２％で指定）していることもあり、ご提案をそのまま導入するのは難しい状況です。

またサイドバーの padding は、そのまま(親のboxの padding のまま)の方が私にとっては扱いやすい構成です。

とりあえずは、サイドバーが下まで伸びたままのデザインのまま、かうたっくさんのサイトのように「サイドバースクロール追従」のコンテンツを追加することで対処したいと思います。

なんか、このAdSenseコードの不具合は、他の部分にも不具合としては影響が出ているみたいですね。
カスタマイズ画面プレビュー表示不具合について | 不具合報告 | Cocoon フォーラム

せっかく、お手間をかけていただいたのに、大変こころ苦しいのですが、前述のように子テーマでスタイルを変更（サイドバーの左右 padding を２％で指定）していることもあり、ご提案をそのまま導入するのは難しい状況です。

またサイドバーの padding は、そのまま(親のboxの padding のまま)の方が私にとっては扱いやすい構成です。

@media screen and (max-width: 1240px)

との事だったんで、@media screen and (min-width: 1241px)と指定しただけ。

好みは色々あるんで大丈夫ですよ。ってか、他の人が見てもできるように対応した感じでもあるので❦

***********

対応方法としても

• 上記CSS以外
• サイドバースクロール追従
• サイドバーに広告を表示するのをやめてみる

など、情報が集まったんで、ユーザーさんの選択肢も増えて良かったと思います。

トピック&スレッドお疲れさまでした❦

**********************

なんか、このAdSenseコードの不具合は、他の部分にも不具合としては影響が出ているみたいですね。

これから設定する人にしては、カスタマイザーやCocoon設定のプレビュー画面での表示もきになりますもんね。

Gさんは色んな事をやってくれるようです ? ? ? 

インラインスタイルを挿入するアドセンスのコードを読んでみましたが、バグの可能性もありそうですね。

アドセンスを表示する範囲内で判定を行い、サイトのスタイルがアドセンス表示の妨げにならないように適宜インラインスタイルを挿入するつもりが、表示範囲の指定が抜けていることで、判定がブラウザ全体に及んでしまっている（表示範囲の外枠で止めるところが、外枠のさらに外枠...と発散してしまっている）
と読めなくもないです。